WEB DESIGN

UPGRADE INFORMTICA

PG. 1

 WEB DESIGN

SUMRIO
APRESENTAO......................................................................................................................................... 3 COMO FUNCIONA ESTE CURSO: .............................................................................................................. 4

Excel 2003 - BSICO ...................................................................... 5 Lio 01: Noes bsicas de Excel ................................................................................... 5 (digitao de textos e valores, ajustar largura de colunas, frmulas simples, soma, mdia, formatao de nmeros, formatao de tabela, funes autosoma, soma e mdia, classificao de dados e grfico de barras) Lio 02: Clculos em planilhas ........................................................................................ 8 (resoluo de problemas de clculos em planilhas) Lio 03: Planilha com Grfico de Pizza ........................................................................... 8 (planilha de oramento, funo hoje(), funo soma, grfico de Pizza) Lio 04: Planilha com Grficos 3D................................................................................... 9 (desenvolvimento de uma planilha de despesas mensais e grficos 3D) Lio 05: Filtros simples e personalizados ...................................................................... 10 Lio 06: Relaes entre planilhas do mesmo arquivo e diferentes arquivos ................. 12 Excel 2007 - AVANADO .............................................................. 14 Lio 01: Funo SE() ..................................................................................................... 15 Lio 02: Funo SomaSE() e SomarProduto................................................................. 18 Lio 03: Funo ContSE() Como Nomear Clula(s) ................................................... 21 Lio 04: Funo ProcV(), ProcH() e Validao de clulas ............................................. 24 Lio 05: Clculos com Data e Hora ............................................................................... 28 Lio 06: Formatao Condicional e Filtros especiais..................................................... 34

UPGRADE INFORMTICA

PG. 2

 WEB DESIGN

APRESENTAO

Bem vindo ao curso de Operador de Micro Computador!

prender informtica faz parte da formao de qualquer profissional nos dias de hoje. No saber informtica se tornou algo to mortal quanto no ter gua pra beber ou ar pra

respirar, ou seja, se voc no conhece ou no utiliza os recursos da informtica no seu dia-a-dia, no se torna competitivo no consegue abraar as oportunidades do mundo atual, no consegue sucesso na carreira nem a praticidade oferecida pela tecnologia.

A Upgrade Informtica vem lhe oferecer a possibilidade de conhecer este fantstico mundo de forma inovadora, sem teorias, sem rodeios, indo direto ao ponto. Isso s possvel porque nossa empresa possui vrios anos de experincia no negcio de computadores, tratando com clientes e conhecendo seus problemas e dificuldades. No somos apenas uma escola, mas uma empresa completa, que vende computadores e acessrios de informtica, que possui uma das melhores oficinas tcnicas de informtica e que oferece um dos melhores cursos de informtica do pas. Voc j um vencedor. A partir do momento que decidiu aprender informtica voc j est trilhando o caminho certo. A informtica, de uma forma ou de outra, faz parte de 100% das atividades humanas nos dias de hoje. E os setores que mais tem empregado no Brasil so os setores de lidam diretamente com a informtica. Torne-se determinado e motivado. No se limite apenas ao que for instrudo em sala de aula. preciso pesquisar, preciso estudar, comprar livros, praticar e fazer tudo que estiver ao seu alcance. Voc confiaria uma cirurgia importante h um mdico que acabou de se formar? Pois ... eu tambm no. Por isso, aps terminar este curso trate de praticar, buscar desafios, estgios, oportunidades e marcar seu nome na histria. Um grande abrao e boa sorte. HORLANDO SOUSA Diretor de Treinamento
horlandosousa@hotmail.com
(41) 9977-3003, 3642-5300, 3018-3439

UPGRADE INFORMTICA

PG. 3

 WEB DESIGN

COMO FUNCIONA ESTE CURSO

DURAO: A durao obedece uma carga horria pr-estabelecida. Esta carga horrio foi criada de maneira que voc possa cumprir todo o ensino proposto no contedo programtico. A data de trmino do seu curso acontecer ao final desta carga horria contada a partir da data de incio do curso. Por exemplo: se o curso de 40 horas e voc assiste 2 horas de aula por semana, voc concluir o curso em aproximadamente 20 semanas (5 meses). Se assiste 6 horas de aula por semana, a concluso ser em aproximadamente 7 semanas (quase 02 meses). Quem deseja fazer o curso rapidamente, deve optar por horrios com maior freqncia de aula e aqueles que desejam fazer o curso mais lentamente devem optar por horrios com menos freqncia de aulas. Em ambos os casos o aluno cumprir a carga horria programada. Importante: muitas vezes o aluno consegue cumprir a programao antes de finalizar sua carga horria. Neste caso, o tempo restante, ser ocupado com novos conhecimentos e novos exerccio. Em caso contrrio, quando o aluno no consegue cumprir no tempo previsto, a escola acrescentar, sem nenhum custo, at 10% a mais de horas aula para ajudar o aluno. FALTAS e REPOSIO DE AULAS: Todo aluno tem direito a repor at 10% de suas aulas, ou seja, se o seu curso de 40 horas aulas e voc faltar 2 aulas de 2 horas, no ir perder estas aulas. A reposio feita no final do curso, ou seja, se voc perdeu uma aula de 02 horas ser acrescida mais uma aula de duas horas. Cuidado: se voc assiste aulas de 4 horas e perde uma aula voc j est usando os 10%. Importante: para o aluno ter direito a reposio de aula dever comunicar antecipadamente a sua falta. Se isso no for feito, aquela aula ser perdida. O certificado s ser emitido para alunos com pelo menos 75% de presena. Quando o motivo for doena ou viagem, com maior perodo de ausncia das aulas, o aluno poder negociar a reposio destas aulas com a diretoria da escola, desde que comunicado antecipadamente. MTODO: Enquanto outras escolas trabalham com turmas de 20 a 30 alunos a Upgrade Informtica trabalha com turmas bem menores, melhorando assim, o rendimento do curso. As aulas so em pequenas turmas mistas, com professores capacitados e bem preparados. As aulas no so Vips (individuais), elas so participativas, em turma, mas cada aluno segue seu prprio ritmo e o instrutor ensina na velocidade individual de cada aluno, assim cada aluno recebe instruo, ateno e acompanhamento de acordo com a sua necessidade e capacidade. s vezes, poder acontecer que, um aluno com uma dvida particular, tenha que aguardar alguns instantes enquanto o instrutor termina de atender uma dificuldade de outro aluno, entretanto por se tratar de turmas pequenas este tempo relativamente curto. Se voc desejar, a Upgrade Informtica conta com curso VIP (aulas totalmente individuais). Para isso verifique em nosso atendimento os preos e horrios disponveis para este tipo de curso. PAGAMENTO: Em alguns casos o aluno parcela o pagamento do curso num prazo superior a data do trmino do curso. Portanto, embora o aluno tenha concludo o curso, deve ficar atento quanto aos demais pagamentos, evitando transtornos.

UPGRADE INFORMTICA

PG. 4

 WEB DESIGN

Webdesign Conceitos Gerais

UPGRADE INFORMTICA

PG. 5

 WEB DESIGN

Lio 01 ESTUDO SOBRE A INTERNET

O QUE A INTERNET? A Internet um conglomerado de redes em escala mundial de milhes de computadores interligados pelo TCP/IP que permite o acesso a informaes e todo tipo de transferncia de dados. Ela carrega uma ampla variedade de recursos e servios, incluindo os documentos interligados por meio de hiperligaes da World Wide Web, e a infraestrutura para suportar correio eletrnico e servios como comunicao instantnea e compartilhamento de arquivos. De acordo com a Internet World Stats, 1,73 bilhes de pessoas tinham acesso Internet em setembro de 2009, o que representa 25,6% da populao mundial. Segundo a pesquisa, a Europa detinha quase 420 milhes de usurios, mais da metade da populao. Mais de 60% populao da Oceania tem o acesso Internet, mas esse percentual reduzido para 6,8% na frica. Na America Latina e Caribe, quase 175 milhes de pessoas tinham o acesso Internet, sendo que 67,5 milhes so brasileiros. Resumindo: Internet um conjunto de redes interligando pelo mundo. COMO FUNCIONA A INTERNET? A estrutura basicamente a mesma sempre, um computador isolado ou uma rede de computadores se conectam na rede de um provedor de acesso (seja ele discado ou banda larga) e a rede do provedor de acesso se conecta a um dos backbones disponveis no pas. Pronto voc est conectado. Mais no s isso, existem vrios outros procedimentos para que a informao viaje e possa sair e chegar no seu computador. Veja a figura abaixo: temporariamente um desses IPs para que voc possa navegar na web. Vamos visualizar isso:

Quando voc liga o seu computador e inicia a conexo com a internet o seu provedor lhe fornece um IP para identificar a sua mquina na rede mundial de computadores. O seu provedor dono de uma determinada faixa de IPs e o que ele faz lhe dar
UPGRADE INFORMTICA

Explicando: No nmero (1) temos a sua mquina imagine que voc quisesse acessar o Orkut. No nmero (2) temos a rede do seu provedor de acesso onde o seu pedido chega e traduzido pelo servidor de DNS para o nmero do IP da mquina onde est o Orkut (no caso 66.249.81.85). O servidor de DNS
PG. 6

 WEB DESIGN

encaminha o seu pedido para o roteador, ele ento analisa a informao e envia ela para o Backbone (3) pois o IP que consta no seu pedido no brasileiro. O Backbone brasileiro analisa o pacote e o envia para os roteadores fora do pas (4), que j tem uma rota para o seu pacote. Os roteadores direcionam seu pedido para um backbone americano (5) que verifica a informao e direciona o pedido para outro roteador que leva o seu pacote de dados at o servidor que possui o IP 66.249.81.85. L (6) o seu pacote analisado e mandado de volta para o IP de origem no caso o da sua mquina levando junto a informao que voc pediu. O pacote refaz o caminho de volta e assim o site aparece no seu monitor. O QUE WWW? A Internet possui diversos servios. A World Wide Web ou WWW apenas um destes servios, e eu diria que o mais utilizado e at o mais importante do ponto de vista comercial. Voc j deve conhecer e at utilizar alguns servios da Internet. Veja abaixo a lista dos mais comuns: WEB (www) Pginas com os mais variados assuntos CORREIO ELETRNICO - Comunicao entre pessoas atravs de mensagens escritas (@) FTP Transferncia de informaes de um computador para outro WAP Disponibilizao de recursos da Internet via telefonia celular CONVERSAS ON-LINE - Troca de informaes simultneas A World Wide Web (que em portugus significa, "Rede de alcance mundial"; tambm conhecida como Web e WWW) um sistema de documentos em hipermdia que so interligados e executados na Internet. Os documentos podem estar na forma de vdeos, sons, hipertextos e figuras. Para visualizar a informao, pode-se usar um programa de computador chamado navegador para descarregar informaes (chamadas "documentos" ou "pginas") de servidores web (ou "stios") e mostr-los na tela do
UPGRADE INFORMTICA

usurio. O usurio pode ento seguir as hiperligaes na pgina para outros documentos ou mesmo enviar informaes de volta para o servidor para interagir com ele. O ato de seguir hiperligaes , comumente, chamado de "navegar" ou "surfar" na Web. Resumindo: quando voc executa um navegador (por exemplo: Internet Explorer) e digita um endereo de de site (exemplo: www.uol.com.br) voc est utilizando um servio www. O nosso curso objetiva criar design de sites e publiclos na internet, ou seja, voc aprender como desenvolver contedo para o servio www.

O QUE SIGNIFICA WEBDESIGN? O web design pode ser visto como uma extenso da prtica do design, onde o foco do projeto a criao de web sites e documentos disponveis no ambiente da web. O web design tende multidisciplinaridade, uma vez que a construo de pginas web requer subsdios de diversas reas tcnicas, alm do design propriamente dito. reas como a arquitetura da informao, programao, usabilidade, acessibilidade entre outros. A preocupao fundamental do web designer agregar os conceitos de usabilidade com o planejamento da interface, garantindo que o usurio final atinja seus objetivos de forma agradvel e intuitiva.

PG. 7

 WEB DESIGN

Resumindo: o Web designer o profissional que desenha pginas para Internet. Este profissional preocupa-se principalmente com a aparncia e contedo do site e muitas vezes depende de outros conhecimentos ou outros profissionais para desenvolver o seu trabalho (exemplo: programador para banco de dados). PORQUE CRIAR UM SITE? A internet se tornou a maior ferramenta de marketing do mundo, e tambm a mais acessvel. Tudo isso se deve ao seu alcance de grande parcela da populao mundial acarretada pela sua dinamizao e disseminao crescentes no planeta. A tendncia do mercado atual que cada vez mais as empresas, necessitarem de um segundo endereo, o virtual. De modo que divulguem seu contedo para se sobreporem ao seu concorrente que possivelmente j tm sua pgina na internet. Um endereo virtual gera publicidade e credibilidade por parte do internauta e consumidor. Os benefcios de se ter uma identidade virtual so vrios podemos apontar como os principais o fato que a internet o meio que passa as devidas informaes de maneira rpida e objetiva. Gerando um grande segmento sobre o carto de visitas sem haver presso sobre o cliente. Este fica vontade pra decidir o que consumir, sendo atrado de forma natural aos domnios empresariais. Torna a relao mais amigvel com o consumidor, por diminuir significativamente as necessidades de inconvenincias inerentes s outras formas de divulgao como: Telemarketing, Panfletos poluentes, Correspondncia e Outdoor que causam poluio visual e ambiental. Desse modo, esclarece mais que todos os meios anteriores citados e com mais elegncia se for contratado o profissional correto para direcion-lo devidamente. E o custo com a mo de obra e matria prima so muito menores, pois, precisam contar com inmeros profissionais e/ou despesas de impresso altssimas devido demanda comercial. Outra vantagem que leva sobre as outras formas de anncios, que pode ser acessado a qualquer hora e lugar que tenha internet, tornando mais conveniente e as propostas oferecidas sendo analisadas com mais calma.

O QUE SIGNIFICA HTML? HTML (acrnimo para a expresso inglesa HyperText Markup Language, que significa Linguagem de Marcao de Hipertexto) uma linguagem de marcao utilizada para produzir pginas na Web. Documentos HTML podem ser interpretados por navegadores. Tudo que voc ver em um navegador num pgina na internet na verdade est em cdigo HTML, s que aparece interpretado na sua tela. H bem pouco tempo voc s conseguiria criar uma pgina para internet se soubesse programar (escrever) em HTML. Hoje em dia no h mais necessidade de dominar esta linguagem, pois os softwares de desenvolvimento so sofisticados e permitem que voc se preocupe exclusivamente com o layout. Se voc tem curiosidade sobre como escrever em HTML, ao final desta apostila oferecemos algumas noes bsicas.

UPGRADE INFORMTICA

PG. 8

 WEB DESIGN

EXERCCIO DE FIXAO: A partir da leitura das pginas anteriores, responda as perguntas abaixo: 1) O que Internet? Faa uma pesquisa na internet e descubra respostas para as perguntas abaixo: 9) Qual a diferena entre a palavra Internet (com inicial maiscula) e internet (com inicial minscula)?

2) Numa conexo com a Internet, o seu computador se comunica com um outro equipamento. Como chamado? 10) Um site desenvolvimento para um navegador (por exemplo: Internet Explorer) ir funcionar seguramente em qualquer outro navegador ou existe a possibilidade de um site criado por um web designer funcionar bem em um navegador e no funcionar bem em outro?

3) Como um computador identificado na Internet?

4) Cite pelo menos trs servios oferecidos pela Internet.

5) Quais destes servios considerado o mais importante para o Web designer?

11) Existem programas que permitem desenvolver sites automaticamente e sem muito esforo. Pesquise na internet o nome de pelo menos dois programas ou sites que permite isso e escreva aqui os seus nomes ou endereos.

6) Qual a importncia para uma empresa, produto ou pessoa possuir um site na Internet?

7) Qual a participao de um Web designer na criao de um site? O que ele faz?

12) O que significa Internet 2.0 (dois ponto zero)? O que significa Web 3.0? Isso realmente existe?

8) O que significa HTML?

UPGRADE INFORMTICA

PG. 9

 WEB DESIGN

Lio 02 TIPOS, REGISTROS E DOMNIOS

TIPOS DE SITE: Para desenvolvimento de um site na internet existem diversos recursos tecnolgicos que dividem os tipos de pginas em alguns grupos principais: Pginas HTML: so pginas com aparncia profissional com textos e imagens (s vezes possuem o recurso embutido de programao conhecido como Javascritp). Pginas com Banco de Dados: so pginas HTML mais que utilizam recursos de programao (ex: um formulrio de cadastro do usurio, a emisso de um boleto bancrio, pagamento carto). Pginas Animadas: desenvolvidas geralmente em Flash, so leves, mas tambm utilizam projeto HTML. Consideraes: Basicamente todas as pginas (sites) de internet so em HTML O diferencial est nos recursos utilizados: HTML (textos e imagens), Programao (clculos, anlise e banco de dados) e Animao (Flash). possvel identificar, com um pouco de prtica, uma pgina se ela puramente HTLM, se tem recursos de programao ou animao, ou ainda se utiliza os trs recursos. O nosso curso de Webdesign prope a voc criar pginas HTML pura que atende a todos os tipos de sites, e ser a base para no futuro voc aprender programao e animao em outros cursos. As linguagens de programao mais conhecidas so: ASP e PHP (s vezes difcil identificar em que linguagem foi desenvolvida). Os sites em Flash nunca so totalmente cdigos Flash, ou seja, eles so mistos (Html e Flash). Um site em Flash geralmente alegre, bonito e dinmico. Um site pode ter vrias pginas, algumas feitas somente em HTLM, outras com recursos de programao e outras com animao, ou seja, cada pgina possui uma classificao. Por exemplo: existem pginas que a abertura feita em flash, e aps a abertura o que voc v so pginas totalmente feitas em HTML. Ao abrir um site voc pode dar um clique no menu Exibir > Cdigo Fonte e ver as linhas de comandos HTML e inclusive descobrir que tipos de recursos de programao extras existem no site (asp, php, java scritp, etc...). EXERCCIO PRTICO: 1) Visite os sites abaixo e saiba mais sobre os recursos falados anteriormente e depois responda as questes: Programao em PHP: www.revistaphp.com.br Programao em ASP: www.superasp.com.br Programao em Flash: www.pontoflash.com.br Programao em HTML: www.extremaonline.com/html.html

2) Responda as questes abaixo: I. No site www.cocacola.com.br que tipo de recurso predominante (Flash, Html, Asp): ________________________________ II. O site www.receita.fazenda.gov.br tem algum recurso programao ASP ou PHP? ________________________________

UPGRADE INFORMTICA

PG. 10

 WEB DESIGN

3) Pesquise na internet e descubra alguns sites com as seguintes caractersticas: a) HTLM puro (sem nenhum recurso de programao): ____________________________ b) Com programao PHP: ___________________________________ c) Com programao ASP: ___________________________________ d) Com programao FLASH: ____________________________________ 4) Diferentes sites exigem diferentes recursos. A seguir apresentamos alguns tipos diferentes de negcios que voc deve pesquisar um site existente na Internet que voc tenha gostado e indicar o que mais lhe chamou a ateno: a) Site de compras (exemplo: Americanas, Casas Bahia).

d) Site de um escritrio de Advocacia.

e) Site de uma Panificadora.

f) Site de uma Clnica Mdica.

g) Site de uma loja de Informtica.

h) Site de uma Igreja.

b) Sites de pesquisa (exemplo: Google.com, Bing.com).

i)

Site de uma Boat, Bar ou Lanchonete.

c) Site de empresa area (exemplo: Gol, Tam).

UPGRADE INFORMTICA

PG. 11

 WEB DESIGN

REGISTRO DE DOMNIO DE SITE: Para se ter um site na internet preciso possuir um domnio (ex: www.horlando.com.br). Este domnio precisar ser registrado e uma das maneiras pelo site www.registro.br. Visite o site REGISTRO.BR e responda as seguintes questes: 1) Existe proprietrio para o site www.upgrade.com.br? R:__________________ 2) Qual o proprietrio do site e o seu telefone? R:______________________________________ ________________________________________ 3) J existe um domnio registrado para um site com o seu nome: ex: www.seunome.com.br: R:______________________________________ ________________________________________ 4) Quem a pessoa proprietria do domnio www.cocacola.com.br. R:______________________________________ ________________________________________ 5) Quantos sites existem registrados hoje no Brasil com o domnio .COM.BR? (verifique em estatsticas) R:______________________________________ ________________________________________ 6) Qual o total de sites registrados no Brasil? R: _____________________________________ ________________________________________ ________________________________________ 7) Leia a sesso FAQ sobre registro de domnio no site e e responda: a. O que um domnio? b. Voc precisa de provedor para registrar domnio?

c. Voc pode registrar sua cidade ou seu bairro com domnio GOV.BR? Porque?

d. O que so categorias de entidades? Cite o exemplo de trs e entidades? SERVIDORES: Os servidores de internet servem para hospedar o seu site. Alm disso eles tambm oferecem diversos servios como por exemplo ajudar no registro de domnios (endereos) de sites e tambm na criao de sites. Visite o site www.UOLhost.com.br e responda as perguntas abaixo: 8) Quais os domnios disponveis para um endereo com o seu nome (exemplo: horlando.net). 9) Quanto custa o registro de domnio .com? 10) Quanto custo o registro de domnio .net? Visite o site www.XPG.com.br e siga os passos abaixo: 11) Cadastre-se e faa o registro de um site gratuito com o seu nome ou com algum outro que voc desejar. (exemplo: upgradearaucaria.xpg.com.br). 12) Acesse a pgina de configuraes do XPG e procure pela opo FTP e depois clique na opo Mudar para FTP. 13) Aps mudar para FTP, feche sua janela de Internet. Feche qualquer janela aberta. 14) Abra o cone meu computador. Na barra de endereos digite: ftp.xpg.com.br e Enter. 15) Informe o seu login e senha do XPG. 16) Prontinho o que voc est vendo a o seu servidor de FTP.
PG. 12

UPGRADE INFORMTICA

 WEB DESIGN

Lio 03 UM SITE RPIDO E PRTICO

UM SITE NO WORD: Criar uma pgina de internet algo to simples que pode ser feito at mesmo no Word. Veja como: 1) Execute o Word. 2) Digite um texto e insira figuras como se estivesse construindo uma pgina de Internet. 3) Faa uma pgina bem simples, como mostra o exemplo da figura abaixo: 11) Faa um teste executando o arquivo Index e verifique se est abrindo como uma pgina da Internet. (obs: apesar de abrir como uma pgina da internet ainda no est na Internet). 12) Feche sua pgina de teste e volte pasta onde se encontram os arquivos do seu site. 13) Selecione os arquivos e copie (Ctrl+C). 14) Abra a sua pasta de FTP (ftp.xpg.com.br). 15) Apague qualquer arquivo dentro do servidor. Obs: a pgina no deve ser igual a da figura. Esta figura apenas um exemplo. 4) Aps concluir sua pgina (bem simples) faa uma reviso no texto. 5) Agora clique no menu Arquivo > Salvar Como. 6) Em tipo escolha: pgina da web (html) em nome digite: ndex 16) Cole os arquivos do seu site na pasta ftp. 17) Aps copiar, feche qualquer janela aberta. 18) Execute o programa de Internet e acesse sua pgina. (Pode acessar de qualquer computador do mundo). Exemplo: www.upgradearaucaria.xpg.com.br REVISANDO: 19) Execute o Word e faa uma nova pgina de internet. Seja criativo e explore seus conhecimentos de Word. Se necessrio solicite ajuda do seu instrutor para criar a pgina. 20) Salve como html e depois publique no seu servidor de FTP do xpg. Mostre ao instrutor. 7) Escolha uma pasta para salvar o arquivo (a pasta dever ser uma exclusiva para o site). 8) Clique no boto Salvar. 9) Feche o Word. 10) Abra a pasta onde voc salvou o site.

UPGRADE INFORMTICA

PG. 13

 WEB DESIGN

UM SITE NO PUBLISHER: Se voc tem pouco tempo ou pouco conhecimento e precisar fazer rapidamente um site completo para uma empresa o melhor programa que existe o Publisher. Nesta lio voc aprender como criar rapidamente um site. Siga os passos abaixo: 1) Execute o Microsoft Publisher. 2) Clique no menu Arquivo > Novo. 3) No painel sua esquerda, clique em Sites. 4) Escolha algum modelo de site rpido. 5) Informe os objetivos do site clicando em quantas opes desejar. Quanto mais opes mais pginas o site ter. Exemplo: eu criei um site com as opes Vender Produtos e Fornecer Informaes para Contato. 6) Aps confirmar o que deseja, faa alteraes no texto do site e se necessrio inclua novas figuras. Dedique alguns minutos para incluir informaes. Na parte inferior da tela existe uma seqncia com o nmero das pginas do site. Basta clicar e alterar o contedo. Com um pouco mais de tempo voc ver que fcil mudar o layout os tipos de letras, as cores, etc... 7) Faa um teste na sua pgina. Clique no menu Arquivo > Visualizar Pgina da Web. 8) Faa as correes e alteraes que achar necessria. 9) Salve seu arquivo na sua pasta de exerccios. PARA PUBLICAR O SITE: 10) Crie uma pasta exclusivamente para o site final. A pasta no dever conter nenhum outro arquivo. 11) No Publisher clique no menu Arquivo > Publicar na Web.
UPGRADE INFORMTICA

12) Salve o site na pasta que criou exclusivamente para isso. 13) Agora copie o contedo para dentro do servidor de FTP do xpg. 14) Depois de copiar acesse a internet e visite o seu site. Exemplo: www.upgradearaucaria.xpg.com.br

Obs: dedique alguns minutos testando o seu site. REVISO: 15) Execute o Publisher. 16) Crie o site para a Upgrade Informtica. 17) Solicite ao seu instrutor um panfleto ou anotaes com informaes sobre a empresa (exemplo: nome, telefone, endereo, cursos, produtos, etc...). 18) Coloque tudo nas suas pginas. 19) Explore tudo que puder no Publisher. 20) Finalmente publique o site. 21) Faa suas crticas, melhore, altere. 22) Mostre ao seu instrutor.

PG. 14

 WEB DESIGN

FIREWORKS

UPGRADE INFORMTICA

PG. 15

 WEB DESIGN

EXERCCIO DE FIREWORKS TRABALHANDO IMAGENS

Faa o exerccio a seguir conforme os passos enumerados. VISUALIZAO DA IMAGEM NO FIREWORS 1. Para EXECUTAR o Fireworks MX: Clique no boto INICIAR > Todos os programas > Macromdia 2. Para ABRIR um arquivo: Clique no menu Arquivo > Abrir 3. Escolha a pasta Meus Documentos > Minhas Imagens > Amostras de Imagens 4. Abra o arquivo NINFIAS.jpg 5. Para visualizar a imagem no tamanho real 100% Pressione as teclas Ctrl + 1 6. Para visualizar a imagem no tamanho de 50% Pressione as teclas Ctrl + 5 7. Para AMPLIAR a visualizao (zoom) da imagem: Pressione as teclas Ctrl + = (control e igual) 8. Para REDUZIR a visualizao (zoom) da imagem: Pressione as teclas Ctrl + - (control e menos/hifen) 9. Ajuste o zoom (visualizao) para 100% (basta pressionar Ctrl + 1) 10. Para VISUALIZAR A TELA INTEIRA da imagem quando a imagem est com um zoom muito grande: Pressione a tecla F4 ou a tecla TAB 11. Agora vamos aumentar ainda mais o zoom da imagem: Pressione as teclas Ctrl + = 12. Observe que a imagem est maior do que seu monitor se permite mostrar. Para MOVIMENTAR-SE na imagem: Mantenha pressionada a barra de Espao e, com o mouse, clique e arraste sobre a imagem, puxando a mesma para a direo deseja . 13. Para VOLTAR A VISUALIZAR a tela com suas ferramentas: Pressione a tecla F4 ou a tecla TAB novamente 14. Para AJUSTAR A VISUALIZAO (zoom) h um tamanho que caiba na tela: Pressione a tecla Ctrl + - (control e menos/hifen) at o ajuste ficar zoom (visualizao) ficar confortvel pra voc, mostrando toda a imagem. Se ficar muito
UPGRADE INFORMTICA

pequeno pressione as teclas CTRL + = (control e igual) para amplicar um pouco. SELEO E AJUSTES DE IMAGEM NO FIREWORKS 1. Para SELECIONAR uma rea da imagem veja este exemplo: a. Ajuste a VISUALIZAO (zoom) de maneira que uma flor fique bem prxima. (use Ctrl + = ou Ctrl + - ou Ctrl + 1) b. Clique na ferramenta LAO (na barra de ferramentas logo a sua esquerda). c. Na barra de propriedades (logo abaixo de sua tela) escolha BORDA: Suavizao de Serrilhado. (isso far com que, ao selecionar uma parte da imagem, as bordas sejam suavizadas). d. Clique e arraste o mouse selecionando uma rea da imagem semelhante a da figura abaixo:

e. SE A SELEO DER ERRADO EM ALGUM MOMENTO, pressione a tecla ESC e comece novamente at conseguir fazer toda a seleo da imagem como mostra a figura acima. 2. Para FAZER AJUSTES DE COR E BILHO na imagem: a. Clique no menu Filtros > AJUSTAR COR b. Escolha uma das opes existentes e faa os ajustes necessrios. Experimente a opo MATIZ/SATURAO. c. IMPORTANTE: se voc selecionou uma parte da imagem os ajustes sero feitos apenas naquela parte da imagem. Se voc no selecionou nenhuma parte da imagem os ajustes sero feitos em toda a imagem.

PG. 16

 WEB DESIGN

3. Voc pode fazer a seleo utilizando outras opes de seleo como por exemplo: a. Pressione a tecla ESC para desmarcar qualquer seleo que voc tenha feito b. Clique na ferramenta Lao e mantenha o mouse pressiona nesta ferramenta por alguns instantes.

c. Surgir as opes de lao. Escolha LAO POLGONO. d. Experimente agora fazer a seleo de uma outra parte da foto(uma outra flor) e ento modifique os ajustes de cor.

EXERCCIO DE FIREWORKS FUSO, TEXTO E CAMADAS

Faa o exerccio a seguir conforme os passos enumerados. PARA FUNDIR UMA IMAGEM COM OUTRA 1. Execute o Fireworks MX (se voc j estiver com ele executado feche qualquer imagem que esteja aberta). 2. Abra o arquivo NINFEIAS.JPG (que est na pasta minhas imagens > amostra de imagens) 3. Selecione uma FLOR usando as ferramentas de seleo estudadas no exerccio anterior. Na barra de propriedades utilize a opo BORDA Enevoar com o valor de 05. 4. Aps a seleo est feita pressione as teclas CTRL + C (copiar) 5. Agora abra a imagem POR DO SOL.JPG (que est na mesma pasta da imagem anterior) 6. Com a nova imagem aberta, pressione as teclas CTRL + V (colar) 7. Clique na ferramenta PONTEIRO ( a primeira ferramenta na barra de ferramentas sua esquerda) 8. Clique na FLOR que voc colou e arraste-a para a posio desejada (qualquer lugar na sua tela de imagem). Observe como a imagem est livre para voc poder mov-la para onde desejar. Mesmo que voc pressione a tecla ESC para desfazer a seleo voc poder mover a imagem porque ela est em uma nova camada. 9. Pressione a tecla ESC para desfazer a seleo da imagem. 10. Agora observe a barra de CAMADAS que est sua direita, como mostra a figura abaixo:

Camada da Flor

11. Clique 2x (duas vezes) na camada que possui a flor e modifique o nome dela para FLOR 01. 12. Pressione as teclas CTRL + C (copiar) e ento pressione as teclas CTRL + V para colar uma nova flor. 13. Ela dever vir sobre a flor anterior, ento clique e arraste a flor para uma nova posio. Mude o nome na camada para FLOR 02. 14. Crie agora mais 02 (duas) flores, fazendo um total de quatro e posicione como mostra a figura abaixo:

15. Modifique o nome das camadas, inclusive ao fundo como mostra a figura abaixo:
PG. 17

UPGRADE INFORMTICA

 WEB DESIGN

PARA SALVAR UMA IMAGEM 1. Clique no menu Arquivo > Salvar 2. Escolha a pasta onde ser salvo o arquivo (neste caso a pasta MINHAS IMAGENS) 3. Digite o nome do Arquivo (neste caso UPGRADE POR DO SOL) PARA ESCREVER UM TEXTO: 1. Clique na ferramenta TEXTO (na caixa de ferramentas sua direita). 2. Clique e arraste o mouse criando uma caixa onde ficar o texto e digite o texto abaixo em letras maisculas: UPGRADE (enter) INFORMTICA 3. Agora com a ferramenta PONTEIRO (a primeira ferramenta na caixa de ferramentas) clique no texto que voc digitou e na barra de propriedades (na parte inferior da sua tela) escolha: Fonte: IMPACT, Tamanho 120, alinhamento CENTRALIZADO, cor BRANCO. 4. Ajuste o tamanho da caixa com a ferramenta PONTEIRO e possione como mostra a figura abaixo: 4. E clique no boto SALVAR. Que tal colocar esta linda imagem como plano de fundo do Windows? FAA O SEGUINTE: 1. Abra a pasta meus documentos > Minhas Imagens 2. Clique com o boto direito sobre a imagem UPGRADE POR SOL 3. Escolha a opo DEFINIR COMO PLANO DE FUNDO 4. Feche a janela minhas imagens e minimize/feche qualque outra janela que estiver na sua frente e pronto. A est sua imagem como plano de fundo. AGORA FAA VOC MESMO: O exemplo abaixo foi feito com a imagem MONTANHAS AZUIS.jpg que se encontra na pasta AMOSTRA DE IMAGENS (em meus documentos\minhas imagens). A imagem do esquiador foi tirada da Internet (www.Google.com.br > Imagens).

5. Na barra de propriedades procure pelo boto OPACIDADE e ajuste para 50%. 6. Ainda na barra de propriedades procure pelo boto EFEITOS (abaixo do boto Opacidade) e clique no boto + (adicionar efeito) e escolha SOMBRA e BRILHO > Aplicar Sombra.

UPGRADE INFORMTICA

PG. 18

 WEB DESIGN

EXERCCIO DE FIREWORKS FUSO DE IMAGEM

1. Execute o Fireworks MX e abra o arquivo DESERTO VERMELHO na pasta c:\windows\web\wallpaper. 2. Clique no menu Arquivo > Salvar Como e salve na sua pasta. 3. Clique na Ferramenta Lao Polgono 4. Configure na barra de propriedades a borda Enevoar = 10. 5. Recorte (selecione) toda a Montanha da Foto. 6. Copie (Ctrl+C) e depois Cole (Ctrl+V) o pedao da montanha como mostra a figura abaixo:

9. Formate na fonte IMPACTA, tamanho 220, na cor: opes de preenchimento LINEAR, AZUL COBALTO.

10. Faa outra caixa de texto e digite a frase: VERMELHO 11. Formate na fonte IMPACTA, escala horizontal 50%, tamanho da fonte 300, cor branco. 12. Agora posicione os textos conforme a figura abaixo e posicione as camadas de maneira que o recorte que voc fez da lua e da montanha fiquem sobre o texto DESERTO, mas no fique sobre o texto VERMELHO.

7. Agora, usando a ferramenta de seleo Moldura Oval, com uma borda Enevoar = 5, selecione (recorte) a lua da sua fotografia (verifique se a camada da foto est selecionada, na caixa de camadas logo a direita) e ento Copie e Cole a lua.

13. Na barra de propriedades modifique a transparncia do texto VERMELHO para 25% e usando a ferramenta TRANSFORMAR (na barra de ferramentas) modifique a forma do texto. 14. Salve este arquivo na pasta Minhas imagens com o nome: DESERTO 2. 15. Defina este arquivo como plano de fundo do seu Windows.

8. Agora com a ferramenta Texto digite o texto : DESERTO

UPGRADE INFORMTICA

PG. 19

 WEB DESIGN

16. Faa este exemplo com o arquivo STONEHENGE.JPG que se encontra na mesma pasta do arquivo anterior. A Angelina Julie no estava nesta foto originalmente. Escolha a foto de uma personalidade e faa a mesma coisa.

17. Neste outro exemplo colocamos uma borboleta no fundo do mar por traz dos peixinhos. Que tal colocar um mergulhador ou um tuburao. Experimente. O nome do arquivo SIGA-ME.JPG.

UPGRADE INFORMTICA

PG. 20

 WEB DESIGN

FLASH

UPGRADE INFORMTICA

PG. 21

 WEB DESIGN

COMO DESENHAR NO FLASH DESENHO 1 Nesta lio aprenderemos a desenhar no Flash este co ao lado. como vocs sabem, desenhar no Flash requer uma viso mais "geomtrica" do desenho. Por exemplo: Se repararmos bem no lado direito do desenho, na altura do pescoo, veremos uma linha curva. Pois no se trata apenas de uma linha curva, mas sim de uma linha reta que foi encurvada pela seta preta. Vocs provavelmente j devem saber como fazer isso. Basta puxar uma parte da reta para um lado, sem que ela esteja selecionada e ela se encurvar!. Pois bem: Voltemos ao tutorial. Prontos para comear???

Parte 1 - Iniciando com formas Abra um documento em branco e crie duas layers. A Layer 1 ser o frame onde o desenho ficar e a Layer 2 ficar em branco, apenas para auxili-lo(a) com a modelagem das linhas. Desenhe um crculo, que ser a cabea do co (1). Localize o meio superior do crculo e faa retas acompanhando a figura ao lado e as encurve para que elas fiquem como no desenho ao lado (2). Voc j deve saber como se encurvar uma reta, mas se no sabe, aqui vai uma breve explicao: Desenhe uma reta. No selecione-a e posicione a setinha (preta) acima do meio da linha. Com o boto esquerdo do mouse pressionado, arraste para um dos lados, encurvando-a. Conseguiu? Pois bem. Voltando ao desenho, faa-o como a figura ao lado. Pode usar a Layer 1 para moldar algumas linhas mais difceis de se fazer em conjunto com as outras...

UPGRADE INFORMTICA

PG. 22

 WEB DESIGN

Parte 2 - Detalhes no rosto Vamos ao rosto do co. 1 - Focinho e Boca - Faa uma reta na ponta do futuro focinho. Encurve-a um pouco para que ela fique como no desenho . Para fazer a boca, faa uma reta abaixo do focinho (veja na figura ao lado) 2 - 2 orelha - Faa duas retas acima do olho e encurve a reta da direita, como na figura, para fazer a outra orelha 3 - Detalhe na orelha - Com retas (sem encurv-las) , faa o mesmo desenho da figura ao lado na orelha do co. 4 - Olho e retirada das linhas excessivas Retire, primeiramente, todas as linhas excessivas para que fique como na figura ao lado. Para criar o olho, use a ferramenta crculo com preenchimento nulo (est na barra de ferramentas no lado esquerdo da tela. D para ver na figura ao lado) Parte 3 - Patas e cauda 1 - Primeiramente, tire as linhas excessivas para que fique como na figura ao lado. 2 - Retire uma parte da linha de baixo do co e se desenha uma pata como na figura. (utilize a ferramenta crculo) 3 - Com retas, desenhe o incio das patas do co para que fique como na figura ao lado. 4 - Com retas encurvadas, desenhe a cauda para que ela fique como na figura ao lado Termine essa parte retirando linhas excessivas e observe a figura ao lado e compare-a ao seu desenho.

UPGRADE INFORMTICA

PG. 23

 WEB DESIGN

Parte 4 - Detalhes no co Pescoo - Coloque um crculo entre o pescoo e a mandbula inferior do co, bem junto s linhas, como na figura ao lado. Voc deve estar se perguntando o porqu disso, mas logo ver que far grande diferena. (ver zoom pescoo) Torso - Faa trs linhas retas verticais de cada lado do torso do co (veja na figura). Ligue a parte de cima da primeira linha (a primeira a partir da esquerda) com a parte de baixo da segunda linha, a parte de cima da segunda linha com a parte de baixo da terceira e a parte de cima da terceira com o fim da linha curva do torso. Faa o mesmo do outro lado (veja zoom torso!) Patas - Coloque uma linha curva (linha reta encurvada) na pata traseira do co (abaixo da cauda, veja) para que ela fique como na imagem ao lado. Para as patas dianteiras, utilize retas formando a forma da figura ao lado (ver tambm zoom patas) Parte 5 - Mais detalhes no co 1 - Retire uma parte do crculo e as linhas excedentes para que o pescoo fique como na figura ao lado... 2 - Encurve ligeiramente as linhas do torso e exclua a linha de baixo (excedente) para que fique como na figura 3 - Encurve ligeiramente as retas das patas dianteiras e adicione 3 linhas curvas em cada uma delas para que fique como na figura ao lado.

UPGRADE INFORMTICA

PG. 24

 WEB DESIGN

Parte 6 - Pintando Seu co est pronto. Pinte-o como preferir. Ao lado vo algumas sugestes...

Parte 7 - Variaes Personalize o seu co variando suas formas, etc. e, aproveite! Ao lado uma variao exemplo: (desculpeme se ela no estiver to perfeita! hehehe... a pressa pra postar esse tutorial rpidex!)

DESENHO 2 Vamos desenhar o gato ao lado. como vocs sabem, desenhar no Flash requer uma viso mais "geomtrica" do desenho. Por exemplo: Se repararmos bem no desenho, veremos linhas curvas. Pois no se trata apenas de uma linha curva, mas sim de uma linha reta que foi encurvada pela seta preta. Vocs provavelmente j devem saber como fazer isso. Basta puxar uma parte da reta para um lado, sem que ela esteja selecionada e ela se encurvar!. Pois bem: Voltemos ao tutorial. Prontos para comear???

UPGRADE INFORMTICA

PG. 25

 WEB DESIGN

Parte 1 - Iniciando com formas Abra um documento em branco e crie duas layers. A Layer 1 ser o frame onde o desenho ficar e a Layer 2 ficar em branco, apenas para auxili-lo(a) com a modelagem das linhas. 1 - Desenhe um crculo, que ser a cabea do gato . Faa retas duas retas que se cruzem como na figura ao lado 2 - O Corpo do gato deve ser feito da seguinte maneira: Insira um crculo na regio superior direita ao crculo da cabea. Com 2 linhas retas, ligue os crculos. A reta da direita (maior) deve ser encurvada para fora e a reta da esquerda (menor), para dentro. Voc j deve saber como se encurvar uma reta, mas se no sabe, aqui vai uma breve explicao: Desenhe uma reta. No selecione-a e posicione a setinha (preta) acima do meio da linha. Com o boto esquerdo do mouse pressionado, arraste para um dos lados, encurvando-a. Conseguiu? Faa-o como a figura ao lado. Pode usar a Layer 1 para moldar algumas linhas mais difceis de se fazer em conjunto com as outras...

Parte 2 - Detalhes no rosto Primeiramente, exclua a linha excedente do corpo (4) do gato (parte do segundo crculo). Vamos ao rosto do gato: 1 - Orelhas - Para fazer as orelhas, use retas, curvas ou no. Veja a figura ao lado e acompanhe-a para fazer o desenho. 2 - Olhos e Focinho - Para os olhos utilize a Layer 1, creio que seja melhor. Com um cculo (oval) inclinado, e com retas encurvadas, faa como no desenho. Retire linhas excedented do crculo e o olho estar proto. Faa o mesmo do outro lado. Depois copie tudo, delete da Layer 1 e cole no mesmo lugar, na Layer 2. Para o Focinho, utilize dois cculos (ovais) cruzados e retire o excesso para que fique como na imagem ao lado. 3 - Boca - Utilize retas curvas e um crculo (oval) para fazer a boca. Exclua o excedente.

UPGRADE INFORMTICA

PG. 26

 WEB DESIGN

Parte 3 - Patas 1 - Perna traseira - Faa um crculo oval e com a setinha BRANCA molde-o para que ele fique como na figura ao lado. Incline-o para a esquerda e posicione-o no local indicado pela imagem. Retire os excedentes para que fique como na figura ao lado. 2 - Pernas Dianteiras - Faa uma reta e encurvea bastante para que fique como na figura. Crie mais duas retas para finalizar esta parte com a forma da pata Parte 4 - + Detalhes Adicione os detalhes no rosto - fenda nos olhos, dentes e bigode no gato - como nas figuras ao lado (ver zoom rosto) Retire as linhas excessivas Parte 5 - Mais detalhes e cauda Acompanhe a figura ao lado para criar as patas e as unhas, assim como a cauda. Repare que os dedos do gato so feitos com crculos, cujas partes excedentes foram retiradas. Para fazer a cauda, utilize 4 crculos, um dentro do outro e tire as partes excedentes

Parte 6 - Pintando Seu gato est pronto. Pinte-o como preferir. Ao lado vo algumas sugestes...

UPGRADE INFORMTICA

PG. 27

 WEB DESIGN

FLASH - CRIANDO UM ANIMAO (MOVIMENTO) NVEL SIMPLES 1. Primeiramente selecione a ferramenta Oval e depois defina em Fill Color (cores de preenchimento) como No color (sem preenchimento) e desenhe um crculo no palco. DICA: pra fazer um crculo perfeito pressione a tecla Shift e faa o crculo no palco. Explicando melhor: Quando voc seleciona a ferramenta oval ou retngulo e depois clica em Fill Color(sem preenchimento) e define como No color(sem cor). Isso implica que voc ir fazer um crculo ou retngulo sem preenchimento algum. E muita gente esquece deste detalhe e depois clica dentro do crculo e aperta delete, para apagar o preenchimento. Outro detalhe, que as vezes acontece de estar padro como preenchimento branco, ai piora tudo, porque o usurio no percebe este detalhe e quando vai tentar selecionar o crculo acaba selecionando o preenchimento tambm. Ou acontece dele somente selecionar o contorno e quando vai fazer qualquer animao acaba despercebido que o preenchimento ficou por perdido no palco. E acaba atrapalhando tal animao. Tudo isso acontece porque o usurio no definiu como No Color (sem cor) o preenchimento. Ento vamos continuar. 2. Feito isso, iremos selecionar a ferramenta linha (line) e traar duas linhas no crculo. Se voc no conseguir fazer a linha certinha dentro do crculo, no se preocupe, no Flash sempre que voc cruza linhas, elas sero partidas em dois segmentos distintos, ou seja, voc pode com este recurso eliminar rebarbas. Entenderam? Verifique as imagens abaixo:

3. Agora iremos clicar na ferramenta Baldinho e pintar cada parte de uma cor diferente.

4. At agora s preparamos o objeto para comearmos a fazer a nossa animao. Feito isso, com a ferramenta seta preta selecionada selecione todo o crculo. Como na imagem abaixo:
UPGRADE INFORMTICA PG. 28

 WEB DESIGN

5. Veja a imagem final como deve ficar. Se ficar cheio de pontilhadinhos significa que voc selecionou todo o objeto corretamente.

6. Com o objeto selecionado transforme-o em smbolo. Pressione no teclado (F8). Ir abrir uma janela. Selecione graphic (grfico) e defina um nome qualquer a este smbolo e pressione OK. Repare que fica uma borda ao redor do seu objeto.

7. Agora na linha do tempo(timeline) escolha um nmero qualquer, neste caso escolhi o quadro 20, mas poderia ser qualquer um. Pressione F6 para criar um quadro chave. Obs: Quanto mais quadros voc escolhe, mas lento fica animao. 8. Clique na ferramenta seta preta e arraste para a direita o crculo. Veja a imagem abaixo.

9. Na linha do tempo clique com o lado direito do mouse em qualquer parte no intervalo entre o quadro 1 e o 20. Selecione properties(propriedades). Defina Tween (motion). No flash 5 voc clica com o lado direito tambm e seleciona Painel Quadros e escolha (Tween Motion) Interpolao de movimento. 10. Neste painel defina as seguintes propriedades conforme a imagem abaixo:

11. Pronto a interpolao de movimento j esta pronto. Pressione CTRL+ENTER para testar seu filme.

UPGRADE INFORMTICA

PG. 29

 WEB DESIGN

Botes em Flash 1- Primeiro, criaremos um novo smbolo, fazendo a seguinte combinao de teclas: CTRL+F8. 2- Em Nome, escreva "boto 1", em Comportamento (Behavior) selecione a opo Boto (Button), finalmente clique em Aceitar (OK). Automaticamente, seremos enviado desde a Cena 1 ao palco do smbolo "boto 1"; a onde criaremos um boto que ser includo em nossa biblioteca. O palco unicamente para a criao de botes, ser parecido a seguinte imagem:

Olhe para a linha do tempo ( Timeline), como se pode notar diferente linha do tempo da Cena 1. A linha do tempo, do palco para criar botes parecida a seguinte imagem:

Expliquemos o grfico anterior: Devemos entender que Repouso, Sobre, Pressionado e Zona ativa so os quatro estados de um boto. Vejamos a seguir, o que representa cada estado. Repouso: quando o mouse no est colocado sobre nosso boto ou no se clicou sobre ele.
UPGRADE INFORMTICA PG. 30

 WEB DESIGN

Sobre: quando o mouse est colocado sobre o boto, mas ainda no se clicou sobre ele. Pressionado: logicamente, quando se clica sobre o boto. Zona Ativa: como o prprio nome indica, quando o boto est ativo. Continuemos com a criao de nosso "boto 1". A cabea leitora, na linha do tempo tem que estar assinalando o estado de Repouso. 3- Clique sobre a ferramenta de Retngulo (Rectangle Tool), que se encontra no Painel de Ferramentas. 4- Desenhe um retngulo no centro da rea de trabalho, e coloque a cor azul. 5- Depois pressione a tecla F6; isto far com que a cabea leitora na linha do tempo passe ao estado Sobre. Como poder se notar, o boto se copia, portanto no ser necessrio fazer um novo desenho. 6- Ainda estamos no estado Sobre, se no tiver selecionado o boto, faa-lo (com a ferramenta Seta e clique duas vezes sobre nosso desenho), logo dirija-se ao Preenchimento de Cor que se encontra na seo cores do Painel de Ferramentas, e escolha a cor vermelha, como se mostra a seguir:

7- Depois pressione novamente a tecla F6, para que a cabea leitora passe ao estado Pressionado, e mude a cor de preenchimento da mesma forma que fizemos no passo 7; e escolha uma cor verde. Finalmente pressione pela ltima vez F6 para passar ao estado Zona ativa, isto far com que se copie o boto. Para este ltimo estado, no realmente necessrio mudar a cor de fundo. Com as cores que aplicamos, faremos com que o boto mude de cor, quando se realizar os Estados dos botes anteriormente descritos. Nosso boto foi criado, portanto voc j pode voltar para a Cena 1, abrir a biblioteca e ver que a est o smbolo chamado "boto 1", poder arrasta-lo ao palco as vezes que quiser para fazer vrias cpias dele. Pegue a Ferramenta de Texto (A), e escreva o que desejar, depois coloque o texto sobre o boto criado; para provar o filme faa a tradicional combinao de teclas CTRL + Enter. Se depois quiser ver o filme em seu explorador de internet, unicamente pressione as teclas CTRL + F12.

UPGRADE INFORMTICA

PG. 31

 WEB DESIGN

CRIANDO MOVIMENTOS GUIADOS Nosso exemplo ser em cima de um mapa. Imagine que voc esteja criando um site para um cliente e o mesmo necessita que tenha um mapa em seu site explicando como chegar at sua empresa. S no coloquei nomes as ruas porque isso no seria o caso, mas quando voc for criar realmente um projeto assim, a s usar a ferramenta Texto e escrever. 1- Primeiramente nomeie nossa camada1 para mapa. D dois cliques na camada1 para nome-la.

2- Agora ative a ferramenta Line(linha) e desenhe o mapa.

3- Insira uma nova camada e renomei para bola.

4- Ative a ferramenta Oval e desenhe um crculo bem pequeno no palco. 5- Selecione o crculo e pressione a tecla F8 para transforma-lo em um grfico. Nomeie este grfico para crculo.

UPGRADE INFORMTICA

PG. 32

 WEB DESIGN

6- Feito isso, clique com o lado direito do mouse na camada bola e selecione Add Motion Guide (adicionar guia de movimento).

7- Agora na camada que foi criada Guide Bola (Guia Bola) desenhe a linha que servir de guia para nosso crculo.Para isso ative a ferramenta Pencil ( Lpis ). No esquea de selecionar a camada Guide Bola. OBS: No confunda com a camada bola.

8- Agora iremos selecionar na linha do tempo o quadro 20 e criaremos um quadro chave para as 3 camadas pressionando a tecla (F6). Selecione a ferramenta seta preta e no quadro 20 clique e arraste para baixo at selecionar as 3 camadas de uma vez.

9- Feito isso selecione o quadro 1 da camada bola e arraste o crculo que voc desenhou para o incio da linha guia. Veja as imagens abaixo.

UPGRADE INFORMTICA

PG. 33

 WEB DESIGN

10- Repare que quando voc arrasta para o incio da linha guia a bolinha gruda na linha. Isso acontece porque o im esta ativado, caso no acontea isso, ative o im na caixa de ferramentas. 11- Agora selecione o quadro 20 da camada bola e arraste a bolinha que voc desenho para o final da linha guia.

12- Para concluir animao, clique com o lado direito do mouse em qualquer parte da linha do tempo entre o quadro 1 e 20 da camada BOLA e selecione Create Motion Tween. (Criar interpolao de movimento).

13- Teste sua animao CTRL + ENTER 14- claro que para seu cliente voc importar um carrinho para dentro do seu filme, transformar em grfico e desenhar um mapa bem mais detalhado para seu site. Isso s foi apenas uma das idia apresentada.

UPGRADE INFORMTICA

PG. 34

 WEB DESIGN

CURSO DE FLASH DEGRADS 01

FAZENDO DEGRAD TRANSLCIDO NO FLASH 1. Execute o Macromedia Flash MX 2. Ative a janela Misturador de Cores (Shift + F9) 3. Escolha o estilo SLIDO 4. Clique na ferramenta OVAL e desenhe uma elipse (pressione a tecla Shift para ela seja um crculo perfeito). 5. Com a ferramenta SETA clique na linha de contorno da elipse e pressione a tecla DELETE para apag-la. 6. Clique na ferramenta BALDE DE TINTA 7. Escolha a cor de preenchimento VERMELHO e clique dentro da elipse (isso ir colorir de vermelho a elipse) 8. Clique no desenho e pressione CTRL + G para agrupar (ser agrupado o desenho e a cor de preenchimento pois o Flash os trata separadamente) 9. Faa uma cpia do desenho (use os comando CTRL + C e CTRL + V) 10. Ative a janela TRANSFORMAR (Ctrl + T) 11. Reduza o tamanho do segundo desenho para 90% 12. Posicione o segundo desenho no centro do primeiro

13. Clique 2x no desenho menor (o do centro) para edita-lo. 14. No misturador de cores escolha a opo LINEAR 15. Nas cores escolhas cor inicial BRANCO e cor final BRANCO 16. Em ALFA escolha o valor de 0% (zero) 17. Clique na ferramenta TRANSFORMAR PREENCHIMENTO 18. Altere a posio do efeito de preenchimento conforma a figura ao lado 19. Com a ferramenta MOVER clique 2x numa rea em branco da sua tela para sair do modo de edio. 20. Clique no desenho menor e posicione alinhado na parte superior da elipse maior (como mostra a figura ao lado). 21. Faa uma cpia da elipse menor (use Ctrl + C e Ctrl + V) 22. Rotacione 180 (graus) usando a janela Transformar 23. Posicione a cpia alinhado na parte inferior da Elipse maior 24. Faa uma nova elipse com mais ou menos 40% do tamanho da
UPGRADE INFORMTICA PG. 35

 WEB DESIGN

primeira. Faa um preenchimento Radial de Branco para vermelho com ALFA 100% e posicione no centro do desenho. PRONTO.

FAA ESTES EXEMPLOS SOZINHO:

1. Use o degrad Radial com duas cores para a esfera maior (vermelho e amarelo) e para fazer a sombra use o degrd radial com tons de cinza.

Passo 1

Passo 2

Passo 3

Passo 4

Passo 5

Passo 6

2. Faa este outro exemplo usando duas elipses com degrad LINEAR de duas cores. A menor possui um degrad invertido e o tamanho reduzido para 80%.

Passo 1

Passo 2

Passo 3

UPGRADE INFORMTICA

PG. 36

 WEB DESIGN

FLASH CAIXAS DE TEXTOS 1. Execute o Flash 2. Na barra de Propriedades: a. Configure o tamanho de sua tela para 550 x 400 pixels b. Escolha uma cor (exemplo: VERMELHO) TEXTOS SIMPLES (ESTTICO): 1. Clique na ferramenta TEXTO 2. Na barra de propriedades escolha abaixo:

a. b. c. d. e.

TEXTO ESTTICO Fonte: Tw Cen MT Condensed Extra Bold Tamanho: 36 Cor da fonte: Branco Alinhamento: Centralizado

3. Clique na sua rea de Desenho 4. Digite o texto: EXEMPLOS DE TEXTOS 5. Posicione na parte superior conforme figura ao lado: 6. Clique na ferramenta SETA 7. Clique 1x no texto que voc digitou pressione CTRL+G (agrupar) Devemos sempre agrupar um objeto (mesmo que seja somente um) para que no seja afetado pelos demais CAIXA DE TEXTOS LONGOS: 1. Clique na ferramenta TEXTO 2. Altere as propriedaes conforme modelo abaixo:

Texto Esttico, Fonte: Arial, Tamanho 18, Cor Branco, Alinhamento Centralizado

UPGRADE INFORMTICA

PG. 37

 WEB DESIGN

3. Clique na sua tela de trabalho e digte uma um texto conforme o modelo ao lado, atentando para seguintes observaes: Pressione a tecla Enter para cada linha de texto Ajuste a largura da caixa se achar necessrio. 4. Ao final do Texto, com a ferramenta SETA clique 1x no texto e pressione CTRL + G (agrupar) 5. Posicione o texto conforme a figura ao lado: TEXTO DINMICO: 1. Clique na ferramenta TEXTO 2. Altere as propriedades conforme as caractersticas abaixo:

Texto dinmico, Fonte Times New Roman, Tamanho 14, Cor preto, Multilinha, Mostrar borda em volta do texto 3. Clique na sua tela de desenho e digite o texto ao lado (no precisa apertar ENTER para mudar de linha, basta ir digitando o texto e ele mudar de linha sozinho) 4. Ajuste o tamanho desta caixa de texto de maneira que ela fique parecida com a caixa de texto anterior. (Para isso, usando a ferramenta texto, clique no cantinho inferior direito da caixa de texto). 5. Com a ferramenta SETA posicione a caixa de texto ao lado da outra caixa, pressione Ctrl + G para agrupar. TEXTO DE ENTRADA 1. Com a ferramenta texto, s que utilizando a opo TEXTO DE ENTRADA faa uma caixa de texto semelhante a anterior digitando dentro da mesma o texto modelo, como mostra a figura ao lado. 2. Com a ferramenta SETA posicione o texto ao lado dos demais e agrupe.

UPGRADE INFORMTICA

PG. 38

 WEB DESIGN

3. Verifique se sua tela se parece com a tela abaixo:

TESTANDO O FUNCIONAMENTO DOS TEXTOS 1. Pressione as teclas CTRL + ENTER 2. Veja se o resultado em sua tela e EXPERIMENTE as seguintes aes: a. A 1 caixa de texto e o ttulo no podem ser selecionadas (Esttico) b. A 2 caixa de texto poder ter o texto selecionado (Dinmico) c. A 3 caixa de texto permite que voc DIGITE DENTRO DELA (Entrada) Experimente digitar alguma cosa dentro da 3 caixa. 3. Para sair desta tela pressione CTRL + W COLANDO UMA BARRA DE ROLAGEM Vamos colcar uma barra de rolagem no texto de Entrada 1. Com a ferramenta SETA clique 1x no texto Entrada (a terceira caixa de texto) 2. Veja que a barra de propriedades informa AGRUPAR (ele est agrupado) 3. Pressione SHIFT + CTRL + G (para desagrup-lo) 4. Ative a janela COMPONENTES (menu Janela > Componentes) 5. Na janela componentes clique no boto SCROLLBAR e arraste at a caixa de texto de entrada. 6. Solte o boto na caixa de texto de entrada e ela se posicionar na lateral do texto 7. Com a ferramenta SETA agrupe novamente esta caixa 8. Pressione CTRL + ENTER para testar o funcionamento 9. Experimente digitar um texto longo nesta caixa de texto veja que barra de rolagem permite a rolagem do texto. 10. Para sair desta tela de teste pressione CTRL + W

UPGRADE INFORMTICA

PG. 39

 WEB DESIGN

FAA SOZINHO: Faa uma pgina em Flash como mostra o exemplo abaixo:

Neste exemplo foram utilizados os trs tipos de textos: dinmico, esttico e de entrada, alm de barras de rolagem. FLASH - CRIANDO MSCARA (+ ACTION SCRITP) 1. Execute o Flash 2. Crie 02 camadas como descrito abaixo: Comandos Quadro Texto 3. Na camada TEXTO digite uma palavra e na camada QUADRO faa o desenho de um retngulo Veja a figura abaixo:

UPGRADE INFORMTICA

PG. 40

 WEB DESIGN

4. Converta o retngulo em smbolo e depois converta tambm o texto em smbolo. 5. Clique com o boto direito do mouse no nome da camada QUADRO e clique na opo MSCARA 6. Na linha do tempo selecione a frame (quadro) de n 30 e clique um quadro chave 7. No frame 30 altere a posio do retngulo de maneira que ele fique sobre o texto 8. Crie a interpolao para ambas camadas 9. Teste o resultado com CTRL+ ENTER 10. Volte a tela do Flash com CTRL + W 11. Na camada chamada COMANDOS coloque a ao STOP() no frame de n 30 12. Teste novamente a sua apresentao e depois salve na sua pasta FAA SOZINHO: 1. Crie um novo arquivo e faa uma apresentao diferente como mostra a figura abaixo:

FAA SOZINHO EXEMPLO COM SOM: 1. 2. 3. 4. 5. 6. 7. 8. 9. Crie um novo arquivo. Insira uma foto em uma camada e converta em smbolo Faa algum desenho surgir com efeito mscara Crie uma camada com o nome SOM Clique no menu Aquivo > Importar Procure por algum arquivo de musica e importe este arquivo Abra a biblioteca (tecla F11) Insira a msica que voc importou da biblioteca na camada de som Faa um teste

FAA SOZINHO: 10. Faa uma apresentao com mscara e som e apresente ao seu instruto.

UPGRADE INFORMTICA

PG. 41

 WEB DESIGN

CRIANDO UM SITE EM FLASH ACTION SCRIPT ESTRUTURA DO SITE 1. Dentro da sua pasta de exerccios crie uma pasta com o nome Site 2 em Flash 2. Execute o Flash e defina o tamanho da sua pgina para 600 x 450 3. Crie 04 camadas como descrito abaixo: Comandos Cabealho Botes Corpo Fundo 4. Sua pgina dever ter os seguintes espaos reservados:

5. Crie um filme animado para o cabealho (600 x 100) com os seguintes dados: Nome da Empresa: ANIMAL SEGURANA Slogan: Sua paz nosso servio 6. Escolha uma imagem, figura ou uma cor para o plano de fundo do site 7. Crie botes de menu conforme o layout acima, no esquea de nomear os botes na hora de criar 8. Desenhe um retngulo simbolizando o corpo do site no tamanho 600 x 450 (como mostra a figura acima) 9. Salve seu arquivo com o nome ndex dentro da pasta que voc criou no incio deste exerccio

UPGRADE INFORMTICA

PG. 42

 WEB DESIGN

CRIANDO AS PGINAS DO SITE ACTION SCRIPT 10. Crie um novo arquivo no Flash e salve com o nome home 11. Configure o tamanho da rea de trabalho para 550 x 250 12. Desenhe uma pgina que ser a pgina inicial do seu site, veja a figura como exemplo abaixo:

13. Aps concluir salve esta pasta e tambm exporte um filme desta pgina 14. Crie novos arquivos e desenvolva contedo para as outras pginas seguindo o exemplo anterior para: Empresas Produtos Servios Contatos

15. Salve cada uma destas pginas com seus respectivos nomes e exporte tambm os filmes, seguindo os mesmos passos usados para criar a pgina home. CRIANDO OS CDIGO DAS PGINAS ACTION SCRIPT 16. Feche todos os arquivos e abra o arquivo da pgina principal do site 17. Crie um Clipe de Filme vazio chamado cfvazio (basta clicar no menu Inserir > Novo Smbolo, escolha Clipe de Filme, nomeie como cfvazio, clique OK, depois clique no boto Cena1 para voltar) 18. Ative a janela de Bibliotecas e veja se o clipe vazio (cfvazio) se encontra na lista da biblioteca 19. Na camada Corpo insira o clipe vazio (cfvazio) no canto superior esquerdo do corpo do site.

UPGRADE INFORMTICA

PG. 43

 WEB DESIGN

20. Em Propriedades (aquela barra que geralmente fica na parte inferior da sua tela), digite o nome de instncia para este clipe: cfvazio

21. Clique na camada Comandos, no primeiro frame (quadro) 22. Ative a janela de Aes (se ela no existir na sua tela pressione F9) 23. Escreva o cdigo abaixo: cfvazio.loadMovie("home.swf")

24. Clique no primeiro boto (home) e insira este cdigo: on (release) { cfvazio.loadMovie("home.swf"); }

25. Faa o mesmo procedimento com os botes empresa, produtos, servios e contatos alterando no cdigo apenas o nome home para o nome do arquivo de cada pgina. 26. Faa um teste no seu site (Ctrl + Enter) 27. Faa as correes que voc desejar 28. Salve e exporte o seu site. Obs: o arquivo exportado dever ficar em uma pasta exclusiva. 29. Faa um teste final com o site exportado 30. Abra o programa Dremeweaver. 31. Clique em Inserir > Mdia 32. Insira o arquivo do site do Flash no Dremeweaver e centralize na pgina. 33. Salve naquela pasta que voc criou exclusivamente para este site com o nome ndex.html 34. Publique no seu servidor de FTP do XPG.

UPGRADE INFORMTICA

PG. 44

 WEB DESIGN

DREAMWEAVER

UPGRADE INFORMTICA

PG. 45

 WEB DESIGN

DREAMWEAVEWR LAYOUT COM COLUNAS DESENHANDO SEU PRPRIO LAYOUT 1. Inicie o programa Dremweaver 2. Clique no boto LAYOUT > VIASUALIZAO DE LAYOUT 3. Com a ferramenta 4. Com a ferramenta (desenhar Tabela de Layout) faa uma tabela de 750 x 450 (desenhar Clula de Layout) defina os espaos conforme layout abaixo:
TUDO SOBRE INFORMTICA

Criado por: HORLANDO SOUSA

ESTE UM SITE DE EXEMPLO COMPUTADORES Notebooks Desktop Palms Handels ACESSRIOS Impressoras Teclados e Mouses Gabinetes Peas e placas SOFTWARES Windows XP Microsoft Office Adobe Tecnologias Macromdia TUDO SOBRE INFORMTICA - HORLANDO SOUSA - 2007 Reservado para anuncio Reservado Reservado para anuncio Reservado para anuncio

5. Preencha as clulas com os textos conforme figura anterior e formate os alinhamentos usando a barra de propriedades. Use as cores que desejar: 6. Pressione a tecla F12 para testar a execuo da pgina 7. Verifique se est tudo como voc deseja, faa alteraes e se achar necessrio e teste novamente. 8. PARA FAZER UM TEXTO CORRER a. Clique na clula (quadro) do texto ESTE UM SITE DE EXEMPLO b. Clique no meu Exibir > CODIGO e PROJETO
UPGRADE INFORMTICA PG. 46

 WEB DESIGN

c. Antes do texto crie uma nova linha em branco e digite: <marquee> d. Ao final do texto crie uma nova linha em branco e digite: </marquee> e. Verifique se as linhas ficaram como mostra a figura abaixo:

9. Salve o seu arquivo na sua pasta 10. Pressione a tecla F12 para testar 11. PARA DEIXAR O SEU LAYOUT MAIS COMPLETO FAA O SEGUINTE: a. Coloque a ultima linha da pgina com o efeito MARQUEE (aquela linha de texto no final da pgina que diz: TUDO SOBRE INFORMTICA) b. Insira uma foto de um computador BEM BONITO no centro da pgina (aquele quadro vazio no centro) c. Crie LINKS para cada uma das opes que esto na coluna do lado esquerdo (faa links para outras pginas na internet falando sobre notebooks, desktops, etc...) d. FINALMENTE aps concluir mostre ao seu INSTRUTOR.

UPGRADE INFORMTICA

PG. 47

 WEB DESIGN

DESENHANDO LAYOUTS

1. Faa um site SEM TABELA conforme o layout abaixo: NOME DA EMPRESA

UMA FOTO DA EMPRESA

ENDEREOS E TELEFONE

OBS: crie uma empresa e pesquise uma foto. Utilize um endereo e telefone fictcio.

2. Faa um site usando o modo de TABELAS conforme o layout abaixo:

NOME DA EMPRESA Menu 1 Menu 2 Menu 3 Menu 4 Menu 5 Menu 6 Banner 1

Corpo do site Banner 2

UPGRADE INFORMTICA

PG. 48

 WEB DESIGN

LAYOUT PROJETO PETSHOP PROJETO: Criar um site para um Petshop ESTRUTURA DO SITE:

Criar um web site e

CABECALHO (Logomarca da Empresa em Flash) PRINCIPAL EMPRESA SERVIOS CONTATO BANNER GIF fireworks (Upgrade Informtica) Tamanho: 240x136 Com a logo da Upgrade BANNER FLASH (Promoo rao ces) 240x136 Tamanho: 240x136 BANNER FLASH (pessoal vendendo servios do aluno) Tamanho: 240x136 Com a logo do aluno Rodap (Com imagem gif) Publicar o site FTP Fazer atualizacoes

(botes em Fireworks ou Flash)

UPGRADE INFORMTICA

PG. 49