Auxiliar Web Design Web1

7/29/2019 Auxiliar Web Design Web1

1/71


2/71

2


3/71

Verso 1

Ano 2012

AUXILIAR EM WEB DESIGNAyslan Trevizan Possebom

Daniela Eloise Flr

Fabiano Utiyama

Luiz Fernando Braga Lopes


4/71

4

Os textos que compem estes cursos, no podem ser reproduzidos sem autorizao dos editores

Copyright by 2012 - Editora IFPR

IFPR - INSTITUTO FEDERAL DO PARAN

ReitorProf. Irineu Mario Colombo

Chefe de GabineteJoelson Juk

Pr-Reitor de EnsinoEzequiel Westphal

Pr-Reitor de Planejamento e Desenvolvimento InstitucionalBruno Pereira Faraco

Pr-Reitor de Administrao

Gilmar Jos Ferreira dos SantosPr-Reitor de Gesto de Pessoas e Assuntos EstudantisNeide Alves

Pr-Reitor de Extenso, Pesquisa e InovaoSilvestre Labiak Junior

OrganizaoMarcos Jos Barros

Cristiane Ribeiro da Silva

Projeto Grfco

Leonardo Bettinelli

DiagramaoAlan Witikoski


5/71

Introduo

A prosso de auxiliar de webdesigner recente e surgiu com as possibilidades de

negcio, entretenimento e educao trazidas pela rede mundial de computadores a Internet.

Apesar disso, tm forte procura devido a grande demanda de servios e informaes dispo-

nveis na Web.

A World Wide Web (www) ou somente Web um conjunto de sites (ou documentos)

interligados com a ajuda de um padro de comunicao chamado protocolo TCP/IP. Graas a

ele possvel que vrias tecnologias diferentes troquem informaes entre si.

O contedo abordado neste material trata das tecnologias e ferramentas usadas para

criar e navegar entre as informaes disponibilizadas na Internet. O termo navegar usado

devido a um programa de computador conhecido como navegador (ou browser) que permiteque esta interatividade seja possvel.

Quase sempre, navegar na Internet inclui fazer solicitaes (ou requisies) a servi-

dores que podem estar bem distantes. Servidores so computadores que atendem as so-

licitaes dos usurios, consequentemente o termo cliente usado para representar quem

faz tais requisies. Este curso atm-se ao trabalho desenvolvido do lado do cliente, ou seja,

as ferramentas e tecnologias necessrias construo e manuteno de sites, tratamento de

imagem e criao de animaes.

Este material no pretende esgotar o assunto que vastssimo, apenas apresentar

alguns pontos que merecem destaque no exerccio da prosso.


6/71


7/71

SUMRIO

Unidade 1

1. Objetivos......................................................................................................... 101.1 Organizao.......................................................................................................10

1.2 Sobre o material.................................................................................................10

1.3 Onde estou? O que aprendi?.............................................................................11

Unidade 2

2. HTML.................................................................................................................12

2.1 Como posso escrever pginas em HTML?.......................................................12

2.2 Um pouco mais sobre Tags...............................................................................14

2.2.1 Tags de cabealho.............................................................................................14

2.2.2 Tags de corpo....................................................................................................15

2.2.3 Tags de pargrafo e quebra de linha.................................................................15

2.2.4 Tags de formatao...........................................................................................16

2.2.5 Tags de vinculao de documentos...................................................................17

2.2.6 Tag de Imagem..................................................................................................18

2.2.7 Tag de listas desordenadas...............................................................................19

2.2.8 Tag de listas ordenadas.....................................................................................19

2.2.9 Tag de tabelas....................................................................................................20

2.2.10 Tag de Formulrio.............................................................................................21

2.3 Atividades Comentadas.....................................................................................24

2.4 Exerccios de Reviso.......................................................................................26


Unidade 3

3. CSS...................................................................................................................29

3.1 Mtodos de vinculao......................................................................................30


8/71

3.2 Criando estilos para formatar textos..................................................................32

3.3 Formatando o background.................................................................................33

3.4 Formatando listas ordenadas e listas com marcadores....................................34

3.5 Modelo em Caixa...............................................................................................35

3.6 Criando classes de estilos e identicadores......................................................37

3.7 Modelando leiautes com colunas.......................................................................41

3.8 Atividades Comentadas......................................................................................43

3.9 Exerccios de Reviso........................................................................................43


Unidade 4

4 Introduo a JavaScript..................................................................................48

4.1 Atividades Comentadas.....................................................................................52



Unidade 5

5 Imagens..............................................................................................................55

5.1 Adobe Photoshop...............................................................................................55

5.1.1 Matiz e Saturao..............................................................................................57

5.1.2 Filtros..................................................................................................................58

5.2 Atividades Comentadas......................................................................................58

5.3 Exerccios de Reviso.........................................................................................59


Unidade 6

6 Animao..........................................................................................................60

6.1 Adobe Flash.......................................................................................................60

6.1.1 Linha do tempo..................................................................................................60

6.1.2 Biblioteca de smbolos.......................................................................................61


9/71

6.1.3 Caixa de ferramentas.........................................................................................61

6.2 Publicao..........................................................................................................65

6.3 Atividade Comentada.........................................................................................65



Unidade 7

7 Concluso.........................................................................................................68

Bibliograa.........................................................................................................70


10/71

10

Unidade 1

1. OBJETIVOS

Ao nal deste curso desejvel que o aluno esteja capacitado a auxiliar e a elaborarautonomamente sites da web, desenvolvendo tarefas que viabilizem seu ingresso no mundo

do trabalho e incluam noes de:

Linguagem de marcao de hipertexto;

Formatao visual com o uso de Folhas de Estilo em Cascata;

Criao de scripts;

Edio de imagens; e

Elaborao de animaes.

1.1 ORGANIZAO

O contedo deste material est organizado da seguinte forma: O primeiro captulo traz

uma breve introduo prosso e aos objetivos do curso. O captulo seguinte trata de HTML

e tags. Folhas de Estilo em Cascata o assunto do terceiro captulo. O quarto aborda carac-

tersticas da linguagem Javascript. O tratamento de imagens supercialmente abordado no

captulo cinco. O sexto captulo apresenta sucintamente a criao de animaes. A concluso

apresentada no stimo captulo e as bibliograas no oitavo.

1.2 SOBRE O MATERIAL

O material foi elaborado para uma abordagem de ensino direta com vrias ativida-

des e exemplos retirados da Web. Com isso, possvel perceber que no h um abismo

entre o que se aprender no curso e o que se faz prossionalmente. Os captulos possuem

subsees de Atividades Comentadas, Exerccios de Reviso e Projeto.

As atividades comentadas apresentam exerccios propostos com resoluo e co-mentrios ao nal do captulo. A subseo de exerccios de reviso oferece uma lista de

atividades para que o aluno possa aplicar e aprimorar o que foi trabalhado. J a subseo

Projeto favorece uma aprendizagem contnua, pois a cada captulo algo relacionado ao

tema abordado solicitado, permitindo ao trmino do curso a produo do primeiro site a

caminho da prossionalizao.

Alm disso, ao nal de cada captulo encontra-se a subseo Onde estou? O que

aprendi? este um momento valiosssimo, pois contextualiza o assunto abordado no cap-

tulo, reapresentando de forma mais pontual os objetivos do mesmo. E, de forma integrada, apresentada uma autoavaliao que permite que o prprio aluno identique seus avanos e

decincias, tornando-o mais responsvel e comprometido com o curso.


11/71

11

Ao longo do texto existem perguntas sobre termos, tecnologias ou ferramentas usuais

a um prossional web, que pretende viabilizar momentos de troca de informaes e interao

entre os alunos do curso.

1.3 ONDE ESTOU? O QUE APRENDI?

Ao nal deste captulo possvel entender que a prosso de webdesignerapesar de

ser recente est em ascenso. Vrios assuntos fazem parte dos conhecimentos necessrios

para atuar prossionalmente como, por exemplo, estrutura, estilo e validao de pginas web,

alm de elaborao de imagens e animaes. Mas antes de serem apresentados os detalhes

tcnicos da prosso, este captulo contextualiza o aluno para que ele tenha uma viso geral

desta caminhada, como mostra a barra de progresso da gura 01, alm de apresentar o ma-

terial para que se possa aproveitar melhor o curso.

Figura 01: Barra de progresso

No prximo captulo ser apresentada a linguagem HTML e algumas de suas tags. Ela

responsvel pela estrutura da pgina. Mas antes disso voc se sente capaz de responder

a algumas perguntas? Pense a respeito do que leu e reita:

O que voc entende porweb? Acredita que as novidades da web mudaram e ainda

mudaro a forma de comunicao entre as pessoas?

__________________________________________________________________________

__________________________________________________________________________

__________________________________________________________________________

Voc gosta de tecnologia? Gosta de pesquisar coisas novas e aprender sozinho?

__________________________________________________________________________

__________________________________________________________________________

__________________________________________________________________________

Para voc o que faz um webdesigner? Quais caractersticas suas se encaixa no perl

deste prossional?

__________________________________________________________________________

__________________________________________________________________________

__________________________________________________________________________


12/71

12

Unidade 2

2. HTML

HTML signica Hyper Text Markup Language ou simplesmente linguagem de mar-cao de hiper texto, foi desenvolvida no Conselho Europeu de Energia Nuclear (CERN) em

1980, por Tim Berners-Lee e seus colaboradores, com o objetivo de publicar documentos

organizados e acessveis na Web.

Anos mais tarde foram desenvolvidas as regras formais para a linguagem. O HTML

tornou-se padro Web pelo W3C (World Wide Web Consortium corpo regulador da Web). A

quinta e mais recente verso da linguagem promete melhorias e novas funcionalidades que j

esto sendo implementadas por alguns navegadores.

Quais navegadores voc conhece?

__________________________________________________________________________

2.1 COMO POSSO ESCREVER PGINAS EM HTML?

A linguagem HTML baseada em tags ou etiquetas. Uma tag um metadado, ou seja,

um termo associado a uma informao que o descreve. As tags devem, preferencialmente, ser

escritas com letras minsculas e cam entre o sinal de menor e maior, normalmente possuem

um incio e um m, o incio se d pelo nome da tagde abertura e o m com uma barra

antes da tagde fechamento .

Um site necessita de vrias tags, este material apresenta as tags mais utilizadas.

Normalmente a pgina separada em duas tags, a tagde cabealho e de corpo

. No cabealho vo informaes que podem ser importantes aos motores de busca e

navegadores, apesar de no aparecerem para o usurio. J no corpo cam as caractersticas

do esqueleto da pgina, que contm as imagens, divises, links e tabelas que iro compor

o design do site.

Quais motores de busca voc conhece?

__________________________________________________________________________

A gura 02 apresenta um exemplo simples em HTML que servir para mostrar uma

pgina em branco no navegador.

Ttulo da Pgina

Figura 02: Cdigo HTML de um site em branco.


13/71

13

Cada tagtem um objetivo, a tabela seguinte mostra o propsito de cada uma das tags

do exemplo da gura 02.

Tag Propsito Inicia o documento

Inicia o cabealho da pgina Dene o ttulo do documento

Finaliza o ttulo Finaliza o cabealho da pgina

Inicia o corpo ou contedo da pgina

Finaliza o corpo da pgina

Finaliza o documentoTabela 01: Tags e suas descries

1 ATIVIDADE

1. Abra um editor de texto que permita salvar um arquivo com a extenso .html ou

.htm, caso esteja utilizando o sistema operacional Windows pode ser o Bloco de Notas, e

digite o cdigo da gura 02. Em seguida, abra o arquivo que acabou de criar com o navegador

disponvel no computador que estiver usando e verique o resultado.

2. Altere o texto digitado na tag para Meu primeiro site. Salve o arquivo, abra-

-o novamente com o navegador e verique o resultado.

3. Desta vez, escolha um assunto de sua preferncia e altere o texto da forma que

desejar e siga os mesmos procedimentos do exerccio anterior.

UM NOVO EXEMPLO...

Ttulo da Pgina

Texto apresentado no corpo da pgina. Utilizao da tag de negrito

Figura 03: Cdigo HTML de um novo site

A insero do exemplo da gura 03 pode ser vericada na gura 04.

Figura 04: Exibio do site originado da gura 03

Insero de contedo na tag


14/71

14

Neste exemplo foram inseridos textos no corpo da pgina, ou seja, aps a tag,

inclusive uma frase aparece em negrito, isto possvel a partir da tagde formatao .

Algumas tags possuem atributos, ou seja, informaes adicionais que alteram seu

formato padro. A alterao do cdigo da gura 03 para resulta na alte-

rao apresentada na gura 05.

A alterao da tag

para

fez com que a cor de fundo

do site passasse do padro

branco para vermelho.Figura 05: Insero do atributo cor de fundo vermelha

2 ATIVIDADE

1. Aps digitar o cdigo da gura 03 altere a cor do fundo para amarelo e veja o

resultado. Amarelo em ingls yellow.

2.2 UM POUCO MAIS SOBRE TAGS...

2.2.1 TAGS DE CABEALHO

As tags de cabealho apresentam a estrutura da pgina. Existem vrios tamanhos detags de cabealho que podem ser usadas, a maior representada pela tag e a menor

pela tag. Estas tags so utilizadas pelos mecanismos de busca para encontrar a infor-

mao que o usurio deseja. Veja um exemplo que apresenta todas elas na gura 6.

Ttulo da pginaTag de Cabealho 1

Tag de Cabealho 2Tag de Cabealho 3Tag de Cabealho 4Tag de Cabealho 5Tag de Cabealho 6

Figura 06: Exemplo de Tagde Cabealho.

Outra tagimportante a tag, tambm conhecida pormeta tag. Esta tag

ajuda ferramentas de busca e navegadores a indexar adequadamente. Veja o exemplo na

gura 07.


15/71

15

Figura 07: Exemplo de sintaxe da meta tag

A meta tag possui vrias propriedades, no exemplo anterior foi especicado o tipo

de contedo, ou seja, contedo HTML, alm do conjunto de caracteres (charset) utilizado. O

atributo charset que trata da codicao dos caracteres ajuda na acentuao, feita incorre-

tamente os acentos podero aparecer de forma incorreta, como caracteres estranhos.

Existem outros detalhamentos desta tag, como os atributos keywords, descrip-

tion e author, que especicam respectivamente palavras-chave, descrio e autoria, todas

essas informaes ajudaro os motores de busca na tarefa de indexao dos sites.

3 ATIVIDADE

1. Faa um exemplo e insira uma meta tagque especique o idioma do site.

2. A seguir insira uma meta tagque especique a autoria do site.

3. Acrescente tambm uma meta tagque apresente uma descrio e as palavras-

-chave do site.

2.2.2 TAGS DE CORPO

Algumas tags permitem alteraes na cor do plano de fundo e na fonte disponvel no

corpo da pgina. A escolha da cor pode ser feita pelo nome em ingls ou pela especicao

do nmero hexadecimal equivalente, veja a gura 8.

Ttulo da pginaTags do Corpo da Pgina

Cor do fundo amarelo e cor do texto vermelho.

Figura 8: Exemplo de tagde corpo

2.2.3 TAGS DE PARGRAFO E QUEBRA DE LINHA

Uma tagde pargrafo delimita o contedo do pargrafo e a tag
insere uma que-

bra de linha onde for colocada. Veja o exemplo da gura 09.

Valor Hexadecimal

Nome da cor em ingls


16/71

16

Ttulo da pginaTags de Pargrafo

Primeiro Pargrafo

Segundo Pargrafo

Terceiro Pargrafo

Este texto
possui
quebras de linha.

Figura 09: Exemplo de tags de pargrafo e quebra de linha

Para inserir qualquer comentrio dentro do cdigo HTML, que no ser exibido pelonavegador, faa como a linha retirada da gura 09.

PROJETOElabore um site que traga informaes sobre algum assunto que voc conhea ou tenha

grande interesse. Escolha atentamente o seu texto, pois este site ir acompanh-lo at o

m do curso. De preferncia escreva no mximo dois ou trs pargrafos sobre o assunto e

lembre-se de fazer uso das tags aprendidas at o momento.

2.2.4 TAGS DE FORMATAO

As tags de formatao ajudam o desenvolvedor a exibir adequadamente o contedo

do seu site. Veja o exemplo da gura 10.

Ttulo da pgina

Tags de formatao

Texto em Negrito

Texto Grande

Texto em Itlico

Texto pequeno

Texto Cancelado

Caracter

TextoSubscrito

TextoSobrescrito

Figura 10: Exemplo de tags de formatao

Esse pargrafo possui

duas quebras de linha


17/71

17

Alm disso, atributos de alinhamento podem ser inseridos para que o texto que di-

reita, ao centro ou esquerda da pgina. Veja o cdigo na gura 11 e a visualizao na gura 12.

Ttulo da pginaTags de Alinhamento

Texto esquerda

Texto Centralizado

Texto direita

Figura 11: Exemplo de tags de alinhamento

Figura 12: Visualizao das tags de alinhamento

Outra possibilidade alterar cor, tipo e o tamanho da fonte. Veja o exemplo.

Ttulo da pginaTags de Tratamento da Fonte

Cor padro da fonte. Mudana da cor da fonte.
Mudana da cor da fonte, do tipo e do tamanho.

Figura 13: Exemplo das tags de alterao da fonte

2.2.5 TAGS DE VINCULAO DE DOCUMENTOS

A vinculao de documentos, tambm conhecida como hiperlinks, permite ligar um

documento a outro. A tagncora cria o vnculo e o atributo href usado para enderear

o novo documento. Veja o exemplo da gura 14.

Lembrete

Left= esquerdaCenter= centralizado

Right= direita


18/71

18

Ttulo da pginaTags de Vinculao

Link para o site do W3C Brasil

Figura 14: Exemplo das tags de vinculao

Algumas vezes interessante manter uma linha horizontal para separar os conte-

dos, a tag usada para isso.

PROJETOInsira tags de formatao para valorizar o seu projeto. Escolha um site mais completo que

aborde o mesmo tema do seu site e crie um link para ele.

2.2.6 TAG DE IMAGEM

A insero de imagens possvel com a tag. Para inserir uma imagem em uma

pgina preciso usar a propriedade src que dever apontar para o local e o nome do arquivo

da imagem a ser utilizada. Veja o exemplo da gura 15.

Ttulo da pginaTags de Imagens

Figura 15: Exemplo da tagde imagem

No exemplo seguinte a gura foi dimensionada (width largura / height altura) e

usada como um vnculo a uma outra pgina na web, ao clicar na imagem o usurio ser redi-

recionado para o site da W3C Brasil.

Ttulo da pginaImagem como vnculo

Figura 16: Exemplo de tagcomo vnculo

Identicao da imagem

Nome do arquivo: html.jpg

Nome da pasta: Nova pastaA imagem est no diretrio D


19/71

19

2.2.7 TAG DE LISTAS DESORDENADAS

comum encontrar listas que podem servir para denir e enumerar elementos, cabe-

alhos, ttulos entre outros. Na sua criao utilizada a tag e cada um dos elementos ca

cercado pela tag. Veja o exemplo da gura 17.

Ttulo da pginaTag de listas Internet

ComputadorSite

Figura 17: Exemplo de tagde lista desordenada

Tambm possvel denir o tipo do marcador, para isso utiliza-se o atributo type. A

gura 18a exibe a utilizao da propriedade e a gura 18b a propriedade

. Verique o resultado.

Figura 18a Exemplo de marcador square Figura 18b Exemplo de marcador circle

2.2.8 TAG DE LISTAS ORDENADAS

Neste caso utiliza-se a tag e cada um dos elementos ca cercado pela tag.

A propriedade type dene o tipo de estilo usado pela lista, na gura 19 utilizado letras e na

gura 20 utilizado nmeros.

Ttulo da pginaTag de listas

Internet Computador Site

Figura 19: Exemplo de tagde lista ordenada com letras


20/71

20

Ttulo da pginaTag de listas

Internet Computador Site

Figura 20: Exemplo de tagde lista ordenada com nmeros

2.2.9 TAG DE TABELAS

A tagde tabelas a , dentro dela coloca-se as tags que denem linha e

coluna . Veja o exemplo da gura 21.

Ttulo da pginaTag de Tabela Nome

Telefone Pedro

3333-2222

Figura 21: Exemplo de tagde tabela

A tag cria a primeira linha e as duas tags criam as duas colunas identica-

das por Nome e Telefone. A segunda tag cria a segunda linha e as duas tags

criam as duas colunas preenchidas por Pedro e 3333-2222.

A propriedade border dene a largura da borda da tabela, enquanto que os ele-

mentos width e heigth foram congurados de forma a ocuparem apenas 20% do espao

disponvel para a pgina. Tambm foi denida a cor vermelha para a cor da borda e a cor azul

claro para o fundo da tabela.


21/71

21

4 ATIVIDADE

1. Elabore um site igual ao da imagem. Utilize uma tabela que insira na primeira linha uma lista

ordenada e na segunda uma lista desordenada. Cada item da lista deve apontar para um site.

Veja os sites ao lado da gura.

http://www.educacional.com.br

http://entretenimento.uol.com.br

http://esporte.uol.com.br

http://www.w3schools.com/html

http://www.w3schools.com/css

2.2.10 TAG DE FORMULRIO

Um formulrio uma rea para a entrada de dados, a tag delimita um for-

mulrio, nesta rea possvel conter qualquer formatao exceto outros formulrios. Seus

principais atributos so action, method e name.

O atributo action aponta para a pgina que receber os dados presentes no formu-

lrio. O atributo method assumir duas opes get ou post. Na opo get os dados

fazem parte do endereo. No caso do post os dados fazem parte do corpo da mensagem. O

atributo name identica o formulrio dentro da pgina.

Dentro da marcao da tag so colocados campos de entrada de dados que

podem ser, e .

A tag dene um campo de entrada do usurio. O atributo type especica o

tipo do elemento. A tag apresenta uma lista de valores atravs dos campos option.

A tag abre uma rea para entrada de texto.


22/71

22

Ttulo da pginaTag de Formulrio

Nome:
Senha:

Selecione seus esportes favoritos (Mltipla Escolha)
Basquete
Vlei
Futebol

Selecione o seu tipo de msica preferida (Escolha nica)
Valsa
Samba
Rock

Figura 22: Exemplo de um formulrio com dados de entrada

Na gura 22 so apresentadas formas de entrada de dados. A primeira especicadapelo comando .

Foi denido que a entrada de dados do tipo texto, a identicao do elemento

nome e ele suportar apenas 9 dgitos.

O segundo caso vem logo em seguida com o comando . Neste exemplo a entrada do tipo password, ou seja, senha,

por isso independente do que o usurio digitar ser exibido caracteres que impeam a visua-

lizao do que for digitado.

Tambm possvel vericar dois botes na gura 22, um de enviar e outro de limpar.

Os elementos so inseridos a partir das seguintes linhas de comando.

Figura 23: Exemplo de uma entrada de dados previamente denida

A entrada do tipo submit apresenta o boto que envia os dados de entrada para o

servidor, a opo reset restaura os valores iniciais das entradas de dados.

Ainda na gura 22 foram usadas duas outras opes de entrada de dados checkbox

e radio. O elemento checkbox permite a escolha de vrias opes da lista. O elemento

radio, por sua vez, permite somente uma alternativa.


23/71

23

Em ambos os casos possvel escolher uma opo prvia que pode ser alterada pelo

usurio, inserindo a palavra checked na frente da opo desejada. A gura 24 apresenta a

insero da opo previamente denida e a gura 25 a aparncia desta alterao. Note que

o nome do atributo name o mesmo para toda a lista de valores tanto no caso da opo

checkbox quanto radio.Selecione seus esportes favoritos (Mltipla Escolha)

Basquete

Vlei

Futebol

Selecione o seu tipo de msica preferida (Escolha nica)

Valsa

Samba

Rock

Figura 24: Exemplo de uma entrada de dados previamente denida

Figura 25: Visualizao de opes previamente escolhidas

A tag apresenta uma lista de valores, mas somente uma opo pode ser

escolhida. Verique a gura 26.


Selecione a sua modalidade de luta preferida (Escolha nica)
KaratTaekwondoKung FuJud

Figura 26: Exemplo da tagde seleo


24/71

24

Caso seja necessrio citar uma determinada opo dentro de um elemento select

pode-se nomin-lo como aparece na gura 27.

Karat

Figura 27: Nominao da tagde seleo

A tag, gura 28, apresenta uma rea para entrada de texto, mas com a

particularidade de poder escrever vrias linhas de uma s vez.


Escreva aqui seu comentrio...

Figura 28: Exemplo da tagde entrada de texto

Isso possvel a partir da congurao do nmero de colunas (cols) e linhas (rows)

que o elemento pode ter.

2.3 ATIVIDADES COMENTADAS1 ATIVIDADE

O cdigo HTML da gura 02 no apresenta

nenhum texto, por isso, o site no passa de

uma pgina em branco e somente o ttulo da

pgina foi personalizado.

Na segunda atividade possvel vericar que

a mudana do contedo da tag re-

etida no momento em que o site salvo e

apresentado novamente.

A terceira atividade deve apresentar no ttulo da pgina o contedo escolhido.

2 ATIVIDADE

A alterao da cor do plano de fundo para

amarelo representa uma mudana no atri-buto padro da tag para .

Lembrete

Cols = colunas

Rows = linhas


25/71

25

3 ATIVIDADE

Ttulo da pginaIntroduo ao HTML

Conceitos introdutrios de HTML.

Meta tagque identica o tipo e o conjunto decaracteres.

Identicao do idioma.

Identicao da autoria do site.

Identicao da descrio e de palavras-chave.

4 ATIVIDADE

Ttulo da pginaExerccio

Educao

Entretenimento

Esporte

HTML

CSS

Denio da tabelaCriao da primeira linha/colunaDenio da lista ordenada

Fim da primeira linha/colunaIncio da segunda linha/coluna

Denio da lista desordenada

Fim da segunda linha/coluna

Fim da tabela

Itens

da

lista

ordenada

Itens

da

lista

desordenada


26/71

26

2.4 EXERCCIOS DE REVISO

1) Construa uma pgina que contenha seu nome e uma mensagem de boas vindas. Aps isso,

acrescente:

a) Uma imagem qualquerb) Um hyperlink para www.omelete.com.br

c) Uma imagem com hyperlink para www.uol.com.br

2) Inserir listas, como no exemplo abaixo, que contenha o nome dos pais, irmos e cores

favoritas.

Pais

Joo Silva

Maria Silva

Irmos

Joo Silva Jr.

Maria Aparecida Silva

Jos Silva

Cores Favoritas

1. Preto

2. Branco

3. Cinza

3) Faa uma pgina com tabelas exatamente como as do exemplo a seguir.

Computador Preo

Memria 256 23,00

IID 200Gb 150,00

Processador 230,00

Total

Jogo Ano de Lanamento

Doom 1999

CS 2006

Quake 2001

4) Faa uma pgina com o seguinte formulrio:


27/71

27

5) Faa uma pgina com o seguinte formulrio:


Ao nal deste captulo importante entender que a linguagem HTML consolida a es-

trutura da pgina a partir de comandos chamados de tags. Para cada ao necessria uma

tagepecca. A tabela a seguir resume as tags abordadas.Tipo Exemplo

Incio de um documento HTML

Divises de um documento HTML

Tags de Cabealho

Tags de Pargrafo e Quebra de Linha

Tags de Formatao

Tags de Fonte

Tagde hiperlink

Tagde imagem Tags de Lista Desordenada

Tags de Lista Ordenada

Tags de Tabelas

Tags de Formulrio Tabela 2: Resumo das tags

Neste momento, como mostra a barra de progresso da gura 29, alm de conhecer

o material e as funes de um webdesignerfoi apresentado como possvel construir a es-

trutura de um site.

Figura 29: Barra de progresso


28/71

28

No prximo captulo ser apresentada a linguagem CSS, ela responsvel pelo estilo

da pgina. Mas antes disso voc se sente capaz de responder a algumas perguntas?

Pense a respeito do que aprendeu e responda:

Voc capaz de construir a estrutura de um site? Escolha uma das opes.

( ) Sim, Sozinho ( ) Sim, mas com ajuda ( ) Sim, aps mais exerccios ( ) Ainda no

Caso a resposta para a questo anterior seja Ainda no, a que voc atribui isso?

__________________________________________________________________________

__________________________________________________________________________

__________________________________________________________________________

Com o boto contrrio do mouse sobre um site qualquer escolha a opo Cdigo-Fonte.Voc consegue entender alguma coisa?

( ) Nada ( ) Um pouco ( ) Quase tudo ( ) Sim


29/71

29

Unidade 3

3 CSS

Na construo de pginas para a Internet, a linguagem HTML utilizada na criao

de pargrafos, cabealhos, links, listas, tabelas, formulrios, entre outros elementos que con-

tero as informaes das pginas. A formatao visual o objetivo da linguagem CSS (Cas-

cading Style Sheets Folhas de Estilo em Cascata).

Com a CSS, consegue-se criar a aparncia das pginas web formatando bordas,

cores, fontes, posicionamento de elementos, backgrounds e muitas outras opes visuais.

A linguagem CSS formada por regras e cada regra criada gera um efeito visual nas pgi-

nas. Para criar uma regra usa-se um seletor e um conjunto de propriedades com seus

valores, conforme apresentado na gura 30.seletor{

propriedade: valor;}

Figura 30: Sintaxe de uma regra em CSS

possvel ter vrias propriedades em uma mesma regra. Por exemplo, pode-se ter pa-

rgrafos contendo a fonte Times New Roman, no tamanho 16, com a cor vermelha, no estilo it-

lico. A gura 31 demonstra a regra CSS para a formatao dos pargrafos de uma pgina web.

p {font-family: Times New Roman;font-size: 16pt;font-style: italic;color: red;

}Figura 31: Regra CSS para formatao dos pargrafos

Cada navegador de internet como, por exemplo, Mozilla Firefox, Internet Explorer,

Opera ou Chrome possui um conjunto de estilos internos padro que denido pelo fabricante

para cada tagda linguagem HTML.As regras CSS so criadas para alterar alguns dos valores padres denidos pelos

navegadores. O termo cascata indica que h uma ordem que estes estilos devem seguir,

dando preferncia para alguns valores das propriedades nas regras CSS. A ordem cascata

denida como:

Regras de estilos padres do navegador;

Regras de estilo criadas em arquivos diferentes (externos);

Regras de estilos criadas no mesmo arquivo dentro da tag;

Regras de estilos criadas usando o atributo style de cada tag.


30/71

30

Esta ordem de preferncia permite que um mesmo atributo possa conter valores dife-

rentes e com base nesta ordem o navegador decidir como o contedo ser exibido.

3.1 MTODOS DE VINCULAO

Para criar as regras da linguagem CSS preciso utilizar a tag que dever

estar presente na rea do documento HTML. Este mtodo de vinculao conhecido

como estilo incorporado, utilizado quando necessrio criar regras de estilizao que se-

ro aplicados aos elementos em uma pgina. A gura 32 apresenta uma notcia publicada no

site da UOL e sua formatao. O texto se encontra com fonte Arial, tamanho 20 pontos, cor

azul e largura de 300 pixels.

estilo em CSSp {

font-family: Arial;font-size: 20pt;font-weight: bold;color: #194C7F;

width: 300px;}

Neymar marca, Santos bate Kashiwapor 3 a 1 e vai nal do Mundial

Figura 32: Exemplo de regra CSS para formatao de pargrafo

VOC SABE O QUE UM PIXEL?

__________________________________________________________________________

__________________________________________________________________________

__________________________________________________________________________

5 ATIVIDADE

1. Elabore um site igual ao da imagem. For-

mate usando CSS nas tags e

. Na

tag que foi usada na frase MANCHE-

TES DO DIA, a congurao deve ser fonte

Arial, tamanho 20 pontos, negrito, vermelho

e largura de 300 px. Na tagdos pargrafosutilize fonte Times New Roman, tamanho 10

pontos, cor azul e largura de 150 px.


31/71

31

Normalmente um site possui diversos documentos HTML. Quando duas ou maispginas do site usarem a mesma formatao visual, pode-se utilizar o mtodo de vincula-o com estilo externo, neste caso preciso criar um documento com a extenso .csse colocar todas as regras CSS neste arquivo. Para que o documento HTML consiga exibiras regras liga-se um documento ao outro. Esta ligao feita na seo com a tag

. Veja o exemplo da gura 33.

Arquivo: estilos.css Arquivo: pagina.html

p {font-family: Arial;font-size: 20pt;font-weight: bold;color: #194C7F;width: 300px;

}

Estilo em CSS

Neymar marca, Santos bate Kashiwa por 3 a 1 evai nal do Mundial

Figura 33: Ligao da pgina.html e estilos.css

A gura 34 demonstra o uso de arquivo externo para a criao de regras em CSS. Cada

arquivo HTML que desejar utilizar as mesmas regras de formatao precisa inserir a mesma tag

para fazer a ligao entre os arquivos. Veja a repetio do estilo da gura 32 na gura 34.

Estilo em CSS

Venda de carros bate recorde,mas ca abaixo do previsto

Figura 34: Uso de arquivo externo para regras em CSS

6 ATIVIDADE

Elabore um site igual ao da imagem. Formate

usando CSS externo. No arquivo CSS formate as

tags e

. Na tag que foi usada na

frase MANCHETES DO DIA, a congurao deve

ser fonte Arial, tamanho 20 pontos, negrito, verme-

lho e largura de 300 px. Na tagdos pargrafos uti-

lize fonte Times New Roman, tamanho 10 pontos,cor azul e largura de 150 px. Ao criar o site utilize

duas manchetes intercaladas e entre elas coloque

um texto sem formatao de pargrafo.


32/71

32

Por uma questo de visualizao usamos o estilo incorporado nos prximos exemplos.

3.2 CRIANDO ESTILOS PARA FORMATAR TEXTOS

Com o uso da linguagem CSS possvel alterar a formatao padro do navegador

para modicar a fonte das letras (tipograa), cores, tamanhos, alinhamentos e muitas outras

opes quando se trata de textos.

A tabela 3 traz alguns atributos que so utilizados na estilizao de textos nas regras da

linguagem CSS. Cada atributo apresenta uma funcionalidade e um conjunto de valores possveis.

Propriedade Descrio Valores Exemplofont-family Congura a tipograa

dos textos Serif Sans-serif

Cursive Fantasy Monospace Verdana Arial etc.

p{

font-family: verdana;

}

font-size Congura o tamanhodas letras

Uma unidade demedida utilizadapela linguagemCSS (px, pt, em,cm, in, mm, pc)

a{

font-size: 14px;

}font-style Utilizada para deixar

as letras em itlico

normal

italic

li {

font-style: italic;

}

font-weight Utilizada para deixar

as letras em negrito

normal

bold

body{

font-weight: bold;

}

text-align Congura o alinha-

mento horizontal dotexto

left

rightcenterjustify

h1{

text-align: center;

}

text-decoration Congura o estilo de

sublinhado do texto

noneunderlineoverlineline-through

span{

text-decoration: line--through;

}

color Congura a cor do

texto

Nome da cor (red,green, blue, etc.)

Valor em hexadeci-mal (#AA034B)

Valor em RGBrgb(100,200,75)

b{

color: #C33;}

Tabela 3: Principais atributos para estilizao de textos


33/71

33

Para exemplicar o uso dos atributos na estilizao de textos, observe a gura 35.

Esta gura apresenta um documento HTML que contm um cabealho e um pargrafo com

suas regras de formatao na linguagem CSS.

Estilos CSS

h1, p{font-style: italic;font-family: sans-serif;

}h1{font-size: 16px;color: #ABC;text-align: center;

}

p{color: #00F;font-size: 20px;

}

Aprendendo CSS

Uso de regras de estilos para formatao de textos.

Figura 35: Exemplo de formatao de textos com CSS

3.3 FORMATANDO O BACKGROUND

O background refere-se a uma cor usada atrs de um texto, imagem ou outros conte-

dos presentes em uma pgina. Pode-se inclusive colocar uma imagem de fundo nos elemen-

tos HTML. A Tabela 4 traz as principais propriedades utilizadas na estilizao de background

nos elementos da linguagem HTML.

Propriedade Descrio Valores Exemplo

background--color

Congura uma cor defundo para os elementos

Nome da cor (red,green, blue, etc.)

Valor em hexade-cimal (#AA034B)

Valor em RGBrgb(100,200,75)

p{

background-color:#ABC;

}

background-

-image

Congura uma imagemde fundo para oselementos

url(arquivo.jpg); ul{

background-image:url(fundo.gif);

}


34/71

34

background-

-repeat

Congura a forma queuma imagem ser repeti-da no fundo dos elemen-tos

repeat

repeat-x

repeat-y

no-repeat

div{

background-image:url(fundo.gif);

background-repeat:

repeat-x;}

background-

-position

Congura a posio(horizontal e vertical) deuma imagem de fundoem um elemento

Comprimento(cm, pt, px, etc)

top, bottom, left,right, center

body{

background-image:url(g.jpg);

background-repeat:no-repeat;

background-position:center center;

}Tabela 4: Principais atributos para estilizao de background

Como exemplo da formatao de fundo para os elementos do documento HTML con-

sidere a gura 36. Nesta gura uma imagem do Homer Simpson foi posicionada no canto

inferior direito da pgina e outra gura com tamanho 23px por 20px foi inserida como imagem

de fundo para o pargrafo.

Estilos CSSbody{background-image: url(homer.png);background-repeat: no-repeat;background-position: bottom right;}p{background-image: url(fundo.gif);background-repeat: repeat;color: black;font-size: 30px;

}

Uso de regras de estilos para formatao de backgrounds.

Figura 36: Exemplo de formatao de background.

3.4 FORMATANDO LISTAS ORDENADAS E LISTAS COM MARCADORES

A linguagem CSS possui algumas propriedades que podem ser utilizadas para a for-matao de listas de itens (lista ordenada) e (lista de marcadores). As propriedades

mais comuns utilizadas na estilizao de listas so list-style-type e list-style-image.


35/71

35

A propriedade list-style-type utilizada para denir o estilo da lista. Com o uso

desta propriedade, uma lista ordenada pode se transformar em uma lista com marcadores ou

vice-versa. Pode-se ainda alterar a numerao padro dos itens da lista para algarismos ro-

manos, gregos, letras maisculas ou minsculas, entre outros. A gura 37 apresenta algumas

alternativas para estilizao de listas.

CarrosCincia e sadeCotidianoEconomia

Elemento sem estilizao (decimal)

CarrosCincia e sadeCotidianoEconomia

Elemento sem estilizao (disc)

ol{list-style-type: lower-alpha;

}

Estilos: lower-alpha e upper-alpha

ul{list-style-type: circle;

}

Estilo: circle e square

Figura 37: Exemplos de estilo de marcadores

Quando for desejvel utilizar um tipo de marcador diferente do padro, pode-se utilizaruma imagem. A propriedade list-style-image utilizada para informar a imagem que ser

utilizada para o novo marcador. Veja o exemplo da gura 38.

ul{list-style-image: url(lupa.jpg);

}

Figura 38: Exemplos de marcador com imagem

A regra informa ao navegador que a imagem lupa.jpg dever ser utilizada como

marcador para os itens da lista. A altura da imagem escolhida deve ser ajustada para a altura

da linha, conforme mostrado na gura 38.

3.5 MODELO EM CAIXA

Cada uma das tags inseridas nos documentos HTML so tratadas pelos navegadores

como caixas. Por exemplo, um pargrafo pode ser visto como uma caixa que contm outros

elementos (textos, links, imagens, entre outros). Um link pode ser visto como uma caixa que

contm textos ou imagens.

Cada uma das caixas, ou seja, cada tagapresenta propriedades como, por exemplo,

margin, border, padding e um contedo. O contedo pode estar presente ou no em uma tag.

A gura 39 mostra um exemplo do Modelo em Caixa que cada elemento HTML representa.


36/71

36

Figura 39 Exemplo do Modelo em Caixa

A rea de contedo o espao utilizado para exibir as informaes. Por exemplo, o

texto de um pargrafo o contedo da tag

. O padding um espao ou uma distncia

que separa o contedo da borda. O elemento border corresponde a uma borda que cada

elemento pode conter. O elemento margin corresponde a um espao ou distncia que se-

para uma caixa de outra.

Na gura 38, possvel vericar que os elementos padding, border e margin

esto presentes nos quatro lados da caixa (superior, inferior, esquerdo e direito). Cada umdestes lados pode ser congurado com valores diferentes.

Para alterar a congurao da borda dos elementos existem as propriedades border-

-style, border-width e border-color, que so detalhadas a seguir:

border-style: esta propriedade permite modicar o estilo de borda do elemento. Seus

possveis valores so: dotted, dashed, solid, double, groove, ridge, insete outset.

border-width: esta propriedade utilizada para modicar a espessura da borda. Seus

valores so geralmente congurados com tamanhos em pixels, thin, mdium ou thick. border-color: esta propriedade utilizada para alterar a cor da borda.

Cada uma das quatro bordas (inferior, superior, esquerda e direita) possui um estilo,

largura e cor. Para alterar estes valores individualmente utiliza-se as propriedades da tabela

5 seguinte:

Cor Estilo Larguraborder-bottom-color border-bottom-style border-bottom-widthborder-top-color border-top-style border-top-width

border-left-color border-left-style border-left-widthborder-right-color border-right-style border-right-width

Tabela 5: Propriedades individuais de bordas

Para alterar as propriedades padding e margin nos cantos inferior, superior, es-

querdo e direito de forma individual pode-se utilizar as propriedades da tabela 6.

Padding Margempadding-bottom margin-bottom

padding-top margin-top

padding-left margin-leftpadding-right margin-right

Tabela 6: Propriedades individuais de espaamento e margem


37/71

37

Como exemplo de efeito visual utilizando padding, border e margin, pode-se

utilizar o menu lateral esquerdo do site da UOL, representado na gura 40.

Figura 40: Menu retirado do site da UOL

O menu pode ser implementado utilizando uma lista sem marcadores. Observando

a imagem percebe-se que existe uma linha pontilhada em cima de cada item da lista. Para

inserir um espao entre cada item, pode-se modicar a margem superior, conforme apresenta

o exemplo da gura 41.

Estilos CSS

ul{list-style-type:none;font-family:sans-serif;font-size:14px;width: 160px;margin-left: 50px;

}li{

border-top-style: dotted;border-top-color: #999;border-top-width:1px;padding-top: 5px;padding-bottom: 0px;padding-left:10px;margin-top: 5px;

}

CarrosCincia e SadeCotidianoEconomia

Figura 41: Exemplo de formatao individual

3.6 CRIANDO CLASSES DE ESTILOS E IDENTIFICADORES

Nos exemplos anteriores foram criadas regras de estilos CSS que formatam todas as

tags presentes no documento HTML. Na prtica, cada rea do documento HTML contm um


38/71

38

tipo de formatao diferente, apresentando visualizaes mais atrativas. Como exemplo, ima-

gine um documento HTML que contenha uma estrutura semelhante ao da gura 42.

Figura 42: Exemplo de leiaute

O leiaute apresentado na gura 42 contm uma regio com um menu de opes dolado esquerdo e uma outra regio na rea central para o contedo do documento. Se o menu

fosse implementado como uma lista de itens e na rea de contedos fosse necessrio incluir

uma outra listagem de itens, todos teriam a mesma aparncia do menu. Para solucionar este

tipo de problema, pode-se criar estilos prprios e aplic-los a apenas alguns elementos HTML.

A criao de classes de estilos permite aos desenvolvedores fornecer nomes espec-

cos para as regras e aplicar estas regras a qualquer elemento presente no documento. Para

criar uma classe de estilos necessrio colocar um ponto antes do nome desta classe. Veja

o exemplo da gura 43..meu_estilo{

color:#C00;font-family: Times New Roman;text-decoration: none;background-color:#FF0;

}

Figura 43: Exemplo de Classe de Estilo

Para que a tagexiba no navegador a regra da gura 43, necessrio inserir um atribu-

to chamado class, conforme a gura 44. Com o uso das classes, vrios elementos diferentespodem ter o mesmo efeito visual, alm de permitir aplicar efeitos visuais diferentes para uma

mesma tag.

Link 1Ttulo

Corpo do pargrafo

Figura 44: Utilizao do conceito de classe

Uma outra forma de dar nomes a regras CSS por meio da criao de identicadores.Os identicadores so utilizados para estilizar apenas um elemento entre todos os elementos

de um documento web. Para criar os identicadores preciso fornecer o nome deste identi-

cador precedido pelo smbolo #. Veja o exemplo da gura 45.


39/71

39

#menu{list-style-type:none;width: 200px;}

Figura 45: Exemplo de identicadores

Para associar uma taga uma regra de estilos contendo um identicador preciso

utilizar o atributo id, conforme o exemplo da gura 46.

Item 1Item 2

Figura 46: Exemplo de uso de um identicador

Como exemplo de cdigo, considere o menu de pesquisa do Google, conforme apre-

sentado na gura 47. Este menu pode ser implementado utilizando uma lista de itens.

Figura 47: Menu de opes do site do Google

O cdigo para implementar um menu semelhante segue abaixo. Neste cdigo criado

uma regra CSS com o identicador menu_principal e este identicador vinculado tag

. Tambm foi criado uma regra para estilizar todos os itens de lista que fazem parte do

menu principal. Como o menu contm apenas um elemento selecionado, cria-se um identi-

cador chamado atual para este elemento. Conforme o ponteiro do mouse passa sobre os

elementos, a cor de fundo modicada. Este estilo pode ser demonstrado com a classe cha-

mada fundo_cinza.


40/71

40

Classes de estilos

#menu_principal{list-style-type: none;

font-family: Arial;margin: 0px;padding: 0px;width: 200px;

}#menu_principal li{

padding-top: 5px;padding-bottom: 5px;padding-left: 20px;border-left: 4px;

}#menu_principal li#atual{

color: red;border-left-color: red;

border-left-style: solid;}#menu_principal li.fundo_cinza{

background-color:#EEE;}

TudoImagens

MapasVideo

Notcias

Figura 48: Exemplo de menu

Para criar o efeito rollover onde o estilo modicado apenas quando o ponteiro do

mouse passa sobre o elemento, utiliza-se o seletor :hover, que aplicar a classe fundo_

cinza quando o mouse passar sobre o elemento. A gura 49 mostra a alterao no cdigo da

classe e a gura 50 a adio da classe de estilos a cada um dos itens da lista

#menu_principal li.fundo_cinza:hover{background-color:#EEE;

}

Figura 49: Exemplo de efeito rollover

TudoImagensMapasVideo

NotciasShopping

Figura 50: Exemplo de aplicao de efeito rollover


41/71

41

3.7 MODELANDO LEIAUTES COM COLUNAS

A organizao da informao em uma pgina web de extrema importncia para os

usurios. por meio desta organizao que as informaes so encontradas facilmente e o

usurio se mantm navegando pelos links da pgina. A gura 51 demonstra alguns exemplosde sites que so bastante conhecidos e que fazem uso deste tipo de diviso, tais como Goo-

gle, UOL, Facebooke Globo.com.

Com o uso de colunas possvel manter regies especcas para menus de catego-

rias e menus de acesso aos usurios assinantes, separao da rea de contedos para not-

cias e publicidade, formulrios para contato e acesso (login), entre outros contedos comuns

aos documentos web.

Para fazer uso de colunas preciso utilizar a tag juntamente com as regras de

estilos CSS. Uma tag utilizada para criar uma diviso em um documento web, facili-

tando a aplicao de estilos nesta tagpara denir tamanhos, cores, bordas ou qualquer outra

propriedade disponvel na linguagem CSS.

Figura 51 - Organizao do leiaute em colunas

A gura 52 exibe um exemplo de leiaute contendo trs colunas, uma rea de cabea-

lho e uma rea de rodap.

Figura 52: Leiaute comum com trs colunas


42/71

42

O cdigo HTML necessrio para criar estas divises pode utilizar algumas proprie-

dades especcas para posicionamento de elementos, tais como as propriedades oat e

clear. A propriedade oat utilizada para fazer com que os elementos utuem para a es-

querda (left) ou para a direita (right) da pgina, assim o elemento sair do seu local de origem

e ocupar uma rea diferente no leiaute.No cdigo de exemplo, as tags que contero o menu, a rea de contedos e a

rea de publicidade devem estar uma ao lado da outra.

Para que a tag que conter o rodap passe a ocupar novamente todo o espao

da prxima linha, a propriedade clear utilizada para limpar os contedos que esto u-

tuando ao seu redor. O valor both indica que nenhum elemento pode estar utuando nem

esquerda e nem direita. Veja a gura 53.

Classes de estilos

#cabecalho{width: 1020px;

}#menu{

width: 200px;oat: left;height: 400px;

}#conteudo{

width: 600px;

oat: left;height: 400px;margin-left: 8px;

}#publicidade{

width: 200px;oat: left;height: 400px;margin-left: 8px;

}#rodape{

width: 1020px;clear: both;

}#cabecalho, #rodape, #menu, #conteudo, #publicidade{

border-style: solid;border-color: black;border-width: 1px;margin-top: 10px;margin-bottom: 10px;

}

CabealhoMenuContedo

PublicidadeRodap

Figura 53 Exemplo da tag


43/71

43

3.8 ATIVIDADES COMENTADAS

5 ATIVIDADE

Estilo em CSSh1 {

font-family: Arial;font-size: 20pt;font-weight: bold;color: red;width: 300px;}

p {font-family: Times New Roman;font-size: 10pt;color: #194C7F;width: 150px;

} MANCHETES DO DIA


Mtodo de vinculao incorporado, ouseja, no mesmo arquivo do cdigo HTML.

Formatao da tag usada em ca-bealhos

Formatao da tagde pargrafos

Utilizao da tag formatada

Utilizao da tag

formatada

6 ATIVIDADE

Arquivo: estilos.css Arquivo: pagina.html

h1 {font-family: Arial;font-size: 20pt;font-weight: bold;color: red;width: 300px;}p {font-family: Times New Roman;font-size: 10pt;

color: #194C7F;width: 150px;}

Estilo em CSS

MANCHETES DO DIA


Texto simples sem formatao de pargrafo

Neymar: perder horrvel,mas somos mais que vencedores


1) Implemente uma pgina web que contenha quatro pargrafos, conforme a imagem abaixo.


44/71

44

Os pargrafos devero ser congurados comuma largura de 400 pixels, cor de fundo azul#CCF, fonte sans-serif tamanho 14 pixels. Onome da pessoa dever ser o contedo deuma tag congurada com cor azul#06F, negrito e fonte de tamanho 18px.

Crie um arquivo externo para congurar asregras de estilos em CSS e crie uma ligaocom o documento HTML.

2) Uma pgina dever conter um ttulo e uma lis tagem de itens, conforme apresentado na

imagem abaixo.

Desenvolva um documento HTML contendo re-

gras de estilos em CSS em arquivos externosque apresente um documento conforme a ima-

gem ao lado. O cabealho de nvel 1 dever ser

formatado com a cor vermelha #C00. A lista no

ordenada dever utilizar uma imagem como

marcador.

3) A imagem abaixo um fragmento retirado do menu lateral esquerdo do site Orkut.

Crie uma lista no ordenada de itens onde

cada item uma opo de menu. Esta lista

no dever apresentar marcadores.

Crie um identicador chamado #menu_prin-

cipal para congurar a lista no ordena-

da. Crie um segundo identicador chamado

#pagina_atual que seja capaz de estilizar um

item, colocando uma borda na esquerda de 4

pixels e a cor do texto em azul. Crie tambm

uma classe de estilos chamada .selecao que

seja capaz de alterar a cor de fundo para cin-

za, em cada item da lista, quando o usurio

passar o mouse sobre o item. Atualize os va-

lores de padding, margin e border casoseja necessrio.


45/71

45

4) Implemente uma pgina contendo um leiaute conforme a imagem abaixo.

PROJETOAs etapas anteriores do projeto compreenderam a escolha e elaborao de um texto sobre

um tema de sua preferncia, a criao de um link para outra pgina que abordasse o mesmoassunto e a utilizao de tags de formatao. Esta etapa compreende a insero de formu-

lrios, colunas e folhas de estilo no projeto. Verique a proposta de leiaute a seguir e adapte

sua pgina para car conforme o modelo.

A proposta compreende um CSS para 5 divises da pgina. A primeira foi preenchida por

um formulrio que deve conter uma entrada de texto simples e outra para senha, alm de

um elemento de seleo e um boto de ao. Um CSS de pargrafo foi usado para obter o

efeito da cor azul de fundo.

As colunas do centro da pgina possuem respectivamente uma gura repetida vrias vezes,uma coluna com o material produzido nas etapas anteriores do projeto e uma coluna com

3 links em guras. Cada link leva a uma pgina com tema associado. A identicao das

divises usam o mesmo CSS de pargrafo usado anteriormente. A ltima coluna apresenta

informaes sobre o site.


46/71

46


Ao trmino do terceiro captulo, como mostra a gura 54, possvel perceber que es-

trutura e estilo, apesar de serem diferentes, so complementares.

Figura 54: Barra de Progresso

A vericao de exemplos com sites conhecidos como, por exemplo, Google e Orkut,

esclarece que o reaproveitamento de regras de estilo, uso de classes e/ou identicadores

fundamental para a manuteno dos sites, pois deixa o trabalho mais rpido e fcil. Alm

disso, a diviso das pginas em colunas permite que o contedo que bem distribudo e de

agradvel visualizao.No prximo captulo ser apresentada a linguagem Javascript, ela responsvel por

validaes na pgina. Mas antes disso voc se sente capaz de responder a algumas per-

guntas? Pense a respeito do que aprendeu e responda:

As atividades propostas esto sendo realizadas sem consulta ao resultado?

( ) Sim, Sozinho ( ) As vezes ( ) Quase sempre ( ) No

Caso a resposta para a questo anterior seja No, a que voc atribui isso?

__________________________________________________________________________

__________________________________________________________________________


47/71

47

O Projeto proposto no material est sendo desenvolvido?

( ) Sim ( ) Est atrasado, mas estou fazendo ( ) No

Caso a resposta para a questo anterior seja No, falta motivao para faz-lo?

__________________________________________________________________________

__________________________________________________________________________

__________________________________________________________________________


48/71

48

Unidade 4

4. INTRODUO A JAVASCRIPT

O Javascript uma linguagem de programao client-side, ou seja, que executa

algum tipo de ao do lado do cliente. O Javascript uma linguagem que agrega recursos

adicionais a pginas HMTL, baseando-se em scripts interpretados pelos navegadores tornan-

do-as mais dinmicas em tempo de execuo. comum usar arquivos Javascriptpara fazer

validaes, identicar o navegador ou criar cookies.

VOC SABE O QUE UM COOKIE?

__________________________________________________________________________

__________________________________________________________________________

__________________________________________________________________________

A gura 55 apresenta um exemplo bastante simples da insero de um cdigo Ja-

vascriptem uma pgina HTML. A tag usada para identicar o incio do scripte os

colchetes denem um bloco de instrues Javascript.

Javascript

{ //Comentriodocument.write(Ol Mundo!)}

Comentrios podem ser escritos aps a colo-cao de duas barras

Figura 55: Exemplo de uma pgina HTML com Javascript

Caso seja necessrio realizar operaes algbricas no site, a linguagem Javascript

pode ajudar, a gura 56 exibe um exemplo.

Javascript

window.alert(20 + 35);

Figura 56: Exemplo de operao algbrica direta


49/71

49

Outra forma de calcular valores por meio de variveis. Variveis so declaradas

usando a palavra-chave var. O exemplo da gura 57 exibe a mesma soma agora atravs

de variveis.

var numUm = 20;var numDois = 35;window.alert(numUm + numDois);

Figura 57: Exemplo de operao algbrica usando variveis

Existem vrios operadores aritmticos em Javascriptque podem executar clculos

com variveis ou com valores. importante diferenciar um nmero de um caracter. Qualquer

valor dentro de aspas duplas considerado caracter e portanto no oferecer resultados

conveis se usados em operaes algbricas. A gura 58 mostra um resultado indesejado

para um clculo algbrico.

Javascript

window.alert(20 + 35);

Figura 58: Exemplo de resultado duvidoso

comum a utilizao de scripts com formulrios, neste caso os comandos Javascript

devero estar entre as tags do formulrio. Em algumas situaes faz-se necessrio trans-

formar caracteres numricos em nmeros passveis de clculo, neste caso preciso usar

funes prontas da linguagem especcas para este m. O exemplo da gura 59 apresenta

a funo parseFloat, ela quem transforma o contedo das caixas de entrada de texto doformulrio em nmeros que sero adicionados na funo calcular().


50/71

50

Javascript

function calcular() {var pNum = parseFloat(document.form1.text1.

value);var sNum = parseFloat(document.form1.text2.

value);window.alert(pNum + sNum);}

Primeiro Nmero:

Segundo Nmero:

Figura 59: Exemplo de funo

A funo calcular() no faz parte da linguagem Javascript, uma funo criada pelo

desenvolvedor. Uma funo resolve uma tarefa bem especca e pode ser utilizada vrias

vezes. A declarao de uma funo deve compreender a palavra function e a sua identi-

cao acompanhada dos parnteses como, por exemplo, calcular(). Na gura 59 a funocalcular() soma os valores digitados nas caixas de texto aps sua converso para numrico.

O resultado exibido somente quando o boto calcular pressionado. A isso chama-

mos evento, ou seja, na ocorrncia do boto ser clicado (evento onclick) o resultado do clculo

ser exibido em uma caixa de dilogo.

7 ATIVIDADE

1. Elabore um cdigo JavaScritp que por meio de uma funo calcule o quadrado de um nme-

ro. Um recurso interessante apresentar textos ou resultados dentro de caixas de dilogo. Agura 60 apresenta uma mensagem dentro de uma caixa de dilogo que desaparece assim

que o usurio clicar no boto OK.

Javascript

window.

alert(Senha ou login invlidos!);

Figura 60: Exemplo de uso de caixas de dilogo


51/71

51

Em algumas situaes a caixa de dilogo prev algumas opes como, por exemplo,

aceitar uma ao ou cancel-la. A gura 61 apresenta um exemplo em que h dois botes um

de Ok e outro de Cancelar. Caso o boto Ok seja pressionado outra caixa de dilogo ir

aparecer e exibir a mensagem Voc escolheu Ok!. Caso o boto pressionado seja o Can-

cel a mensagem que ser exibida ser Voc escolheu Cancel!.

function conrmacao(){ var r=conrm(Pressione um boto!);if (r==true){alert(Voc escolheu OK!);

}else{alert(Voc escolheu Cancel!);}

}

Figura 61: Exemplo de uso controle de deciso

Neste exemplo usado um recurso muito poderoso da linguagem Javascript, o con-

trole de deciso IF. Com este comando possvel escolher um entre dois ou mais caminhos

possveis em decorrncia de uma ao ou evento.

Se o usurio clicar em OK automaticamente a opo Cancel est descartada, o

mesmo acontece com a opo OK caso ele escolha a opo Cancel. comum dizer que

as opes de um comando de deciso so mutuamente exclusivas, ou seja, a escolha de uma

das opes exclui as demais.

8 ATIVIDADE

1. Elabore um cdigo JavaScritp que pegue a idade de uma pessoa digitada em um formulrio

dentro de uma pgina HTML e verique a maioridade.


52/71

52

4.1 ATIVIDADE COMENTADA

7 ATIVIDADE

Javascript

function quadrado() {var num = parseFloat(document.form1.

text1.value);window.alert(num * num);}

Digite o Nmero:

Funo que calcula o quadrado do nmeroinformado pelo usurio.

Clculo do quadrado

Chamada da funo

8 ATIVIDADE

Vericao de Maioridade

function idade() {

var idade = parseFloat(document.form1.text1.value);

if (idade>=18){

alert(Voc maior de idade!);}else

{alert(Voc menor de idade);}

}

Digite sua idade:

Scriptque verica se a idade digitada maior que 18.

Funo que altera o valor digitado no campode entrada para valor numrico.

Chamada da funo


53/71

53

4.2 EXERCCIO DE REVISO

1. Elabore um Javascriptque dentro de uma funo verique a senha do usurio. Caso a

senha digitada seja igual a 123456 apresente uma mensagem com a seguinte frase Esta

senha muito fcil. Caso contrrio informe Senha Vlida.PROJETOInsira no projeto uma vericao na senha informada e no tipo de usurio escolhido. Veja na

tabela qual deve ser a senha para cada tipo de usurio e a mensagem que deve ser exibida

caso a senha e o tipo do usurio estiver correto.

Tipo de Usurio Senha MensagemInternauta teste Bem-vindo Internauta!!!

Administrador admin Bem-vindo Administrador!!!

Curioso Bem-vindo Curioso!!!

No caso do usurio do tipo Curioso nenhuma senha deve ser digitada, ou seja, garanta que

neste caso o campo senha s ser vlido ser for um campo em branco. Congure o seletor

de forma que haja um Tipo de Usurio padro em branco, veja a gura. Desta forma, caso o

usurio no selecione nenhum Tipo de Usurio dever ser informada a mensagem Escolha

o seu tipo de usurio!!!

Qualquer senha informada que seja diferente das combinaes acima dever ocasionar a

apario da mensagem Senha Incorreta. Tente Novamente!!!


O quarto captulo mostrou como possvel fazer pequenas validaes no prprio site,

sem precisar trocar informaes com servidores, este tipo de programao limitado e serve

para ns bem especcos. A gura 62 mostra mais um avano com o que se aprendeu at

agora possvel compor sites bem estruturados, estilosos e dotados de certa dinmica.



54/71

54

No prximo captulo ser apresentado o tratamento de imagens. Mas antes disso

voc se sente capaz de responder a algumas perguntas? Pense a respeito do seu com-

prometimento com o curso e assinale a careta mais apropriada:

Critrios

Assiduidade (comparecimento s aulas)

Pontualidade (respeito aos horrios de incio e trmino)

ComportamentoEmpenho (dedicao)

Respeito

Participao oral

AutonomiaApresentao do material durante as aulasRealizao do Projeto

Voc acha que est sendo um bom aluno? Por qu?

__________________________________________________________________________

__________________________________________________________________________

__________________________________________________________________________

Em que pontos acha que deve melhorar? Por qu?

__________________________________________________________________________

__________________________________________________________________________

__________________________________________________________________________


55/71

55

Unidade 5

5. IMAGENS

A utilizao de imagens na web permite maior riqueza de detalhes na apresentaodo contedo, melhorando inclusive a navegabilidade das pginas. Por vezes a matria prima,

ou seja, a imagem pode ser criada ou melhorada, sendo necessria a utilizao de softwares

para edio/tratamento de imagem. Tratar a imagem signica corrigir, retocar ou remover

imperfeies. Existem muitos programas que se propem a essa tarefa, tais como: Adobe

Photoshop, GIMP, Corel Photo-Paint, entre outros.

Antes de usar qualquer imagem importante vericar se a mesma de domnio pbli-

co ou se possui licena. Por domnio pblico entende-se que a imagem pode ser usada livre-

mente. Se ela possuir licena, verique o tipo da licena, somente respeitando tais regras ser

possvel exib-la, deriv-la, de forma completa ou parcial, quer seja para ns comerciais ou

no. Conhea em detalhes a Lei 9610/98 principalmente o artigo 79 que fala especicamente

sobre a utilizao de obra fotogrca.

5.1 ADOBE PHOTOSHOP

O Adobe Photoshop um programa utilizado para edio de imagens. Proporciona

um ambiente produtivo para os designers prossionais criarem imagens sosticadas paraimpresso e web. Os elementos grcos da web podem ser divididos em duas categorias

principais: bitmap e vetor.

Imagens bitmap utilizam uma grade de cores conhecidas como pixels para repre-

sentar imagens. Podem perder detalhes com uma resoluo mais baixa do que a resoluo

para a qual foram criadas. Imagens vetoriais so formadas por linhas e curvas denidas por

objetos matemticos chamados de vetores. So independentes de resoluo, sendo a melhor

opo para representar grcos em negrito que devem manter linhas ntidas, como o caso

dos logotipos.

Dois formatos de imagem bastante utilizados na web so o JPEG e o GIF. O JPEG

possui boa resoluo e a principal vantagem a compactao do tamanho do arquivo. O GIF

possui boa resoluo para as pginas da Internet. Tratase de um formato compactado que

preserva a transparncia em imagens.

A gura 63 mostra a rea de trabalho e alguns elementos bsicos do Adobe Photo-

shop CS3, verso de teste, usada como demonstrao neste material.


56/71

56

Figura 63: rea de Trabalho do Photoshop

Na Barra de Opes so apresentadas as conguraes das ferramentas. A Caixa

de Ferramentas possui diversos recursos. Inclui ferramentas para criar e editar imagens,

campos para registrar cores, alternar modos de visualizao, acesso a recursos on-line entre

outras coisas. As Paletas ou Janelas ajudam a monitorar e modicar as imagens. Por pa-dro as paletas so exibidas empilhadas em grupos.

UM EXEMPLO DE TRATAMENTO DE IMAGEM....

Para ilustrar a utilizao de ferramenta ser aplicado o elemento Lata de Tinta em

uma imagem preta e branca (gura livre). A gura 64a apresenta a imagem em preto e branco

e a gura 64b apresenta a mesma imagem colorida.

Figura 64a: Imagem Preta e Branca Figura 64b: Imagem Colorida utilizando a ferramenta

Lata de Tinta


57/71

57

Para conseguir esse resultado clique na ferramenta Lata de Tinta na Caixa de

Ferramentas, escolha a cor desejada clicando com o boto direito na cor de primeiro plano.

Escolha as cores que desejar e use sua criatividade, a caixa de ferramentas possui outras

opes tente us-las e verique o resultado na imagem.

5.1.1 MATIZ E SATURAO

Outra funo comum ao se trabalhar com cores diz respeito ao comando matiz/satu-

rao que permite tratar as cores de uma imagem ou apenas de uma rea selecionada. Para

abrir a janela que permite a congurao, acesse o menu Imagem > Ajustes > Matiz/Satura -

o, gura 65.

Figura 65: Janela para alterar a matiz e a saturao

A opo matiz altera a cor propriamente dita. Saturao corresponde ao grau de pure-za da cor. A luminosidade corresponde ao grau de luz da matiz. Para alterar as cores de uma

imagem faa as etapas a seguir:

1. Abra uma imagem preta e branca (gura 66a);

2. Se desejar centralize a imagem na tela pressione a tecla F;

3. Selecione a rea a ser colorida por meio das ferramentas de seleo;

4. Aplique difuso, acessando o menu Selecionar > Difuso (Ctrl + Alt + D);5. Altere matiz e saturao ou pressione Ctrl + B para escolher a cor (gura 66b).

Figura 66a Imagem preta e branca Figura 66b Alterando a cor dos olhos


58/71

58

5.1.2 FILTROS

O Adobe Photoshop rico em ltros. Os ltros facilitam o ajuste da imagem como, por

exemplo, os ltros Mscara de Nitidez, Poeira e Rabiscos, entre outros. O ltro Mscara

de Nitidez corrige o desfoque produzido pela decincia de determinados equipamentos acessado atravs do Menu Filtro > Tornar Ntido > Mscara de Nitidez. Coloque um valor

maior para a opo raio, para ajustar a nitidez de uma banda mais larga de pixels, como na

gura 67. O ltro Poeira e Rabiscos utilizado para eliminar sujeiras da imagem, est dis-

ponvel em Filtro > Rudo > Poeira e Rabiscos veja em detalhes a gura 68.

Figura 67: Filtro Mscara de Nitidez Figura 68: Filtro Poeira e Rabiscos

Os ltros de Desfoque, acessados pelo menu Filtro > Desfoque, suavizam os pixels

da rea selecionada. So teis nos retoques, principalmente na montagem ou restaurao de

fotos. Outros ltros podero ser aplicados, dependendo do estado da imagem e do efeito que

o designer pretende obter.

9 ATIVIDADE

Utilizando a ferramenta que desejar crie um banner para o Curso de Web Design.Veja

o modelo na gura.

5.2 ATIVIDADES COMENTADAS

9 ATIVIDADE

Crie um arquivo de 468x60 pixels, com fundo branco;

Utilize a logo do IFPR para a produo do banner;


59/71

59

Dica: abra a logo em outro arquivo, selecione, escolha a opo copiar e no arquivo do banner

clicar na opo colar;

Pressione Ctrl + T para habilitar as opes de transformao na imagem e, aps, segure o

Shift e clique e arraste para a diagonal, aumentando o tamanho. Diminua a opacidade, na

paleta Camadas, para que se torne uma imagem de fundo;

Adicione novamente o logo, posicionando-o no canto esquerdo do banner, e adicione os tex-

tos necessrios, formatando-os.


1) Crie um banner para uma empresa que voc conhece.


Este captulo, que acrescenta mais um nmero na barra de progresso da gura 69, apre-

sentou resumidamente algumas ferramentas de tratamento de imagem. comum usar esse

subterfgio quando a imagem que se pretende utilizar no est a contento.


O assunto do prximo captulo animao. Mas antes disso voc se sente capazde responder a algumas perguntas? Reita e responda:

Aps responder ao questionrio do captulo 4 voc mudou seu comportamento?

__________________________________________________________________________

__________________________________________________________________________

__________________________________________________________________________

Ainda acredita que h pontos a serem melhorados? Quais?

__________________________________________________________________________

__________________________________________________________________________

__________________________________________________________________________

Agora que conhece um pouco mais da prosso acredita que ela se encaixa em seu perl?

__________________________________________________________________________

__________________________________________________________________________


60/71

60

Unidade 6

6. ANIMAO

Outro recurso bastante explorado na web a animao. A animao nasceu com ocinema e foi se adaptando para vrias plataformas diferentes, com a web no poderia ser di-

ferente. Existem vrios programas que fazem animao, como, por exemplo, o Adobe Flash,

Anime Studio, Pencil, e existem tambm as opes para animao em 3D como, por exemplo,

o 3D Canvas, 3D Flash Animator, 3D Studio Max, entre outros.

6.1 ADOBE FLASH

O Adobe Flash um programa que cria animaes multimdia, incluindo sons, ima-

gens, vdeos e outros recursos. Esta ferramenta muita utilizada para a criao de animaes

nas pginas da web. A gura 70 mostra a rea de trabalho e alguns elementos bsicos do

Adobe Flash Professional CS5.5, verso de teste, usada para demonstrao neste material.

Figura 70: rea de Trabalho do Flash

O Palco o local onde ser colocado todo o contedo da animao. Os painis

possuem as mais variadas funcionalidades: cores, alinhamento, bibliotecas, propriedades,

componentes. A Linha do Tempo ( Timeline ) controla a animao, ajudando a organizar o

contedo do palco. Todas as ferramentas necessrias para a criao de grcos esto locali-

zadas na Caixa de Ferramentas.

6.1.1 LINHA DO TEMPO

A Linha do Tempo mostra a animao de forma esquemtica. dividida em vrios

retngulos denominados frames (quadros). Para que se tenha a iluso de movimento neces-

srio colocar os desenhos nos frames, um aps o outro.


61/71

61

A Linha do Tempo tambm trabalha com camadas (layers). Isto signica que cadaelemento da animao ser trabalhado de forma independente, em uma camada diferente.

O Keyframe (quadro-chave) dene a alterao do contedo de um quadro durante a

animao. Utilizando keyframes, podem-se alterar elementos ou mov-los, apenas indicando

a situao inicial e nal. O Adobe Flash produzir os quadros intermedirios. Para inserir um

quadro-chave acesse o menu Inserir > Linha do Tempo > Quadro-chave.

6.1.2 BIBLIOTECA DE SMBOLOS (LIBRARY)

O Flash trabalha com smbolos, que podem ser Graphics, Movie Clips ou But-

tons. Os smbolos so elementos especiais, geralmente criados a partir de grcos vetoriais

ou bitmaps, permitindo a aplicao de efeitos visuais nos desenhos a partir dos quais foram

criados efeitos de cor, transparncia, animaes independentes, interatividade e outros.

O objetivo deles facilitar a animao e alguns ajustes necessrios em seu trabalho.

Por isso, uma das regras que devem ser seguidas a de transformar tudo o que for produzido

em algum tipo de smbolo. Para isto, basta selecionar o que deseja transformar, pressionar F8

e, na janela exibida, atribuir um nome a ele e escolher um dos tipos de smbolo. Eis a descri-o dos trs tipos de smbolos:

Graphic: melhor opo para animao, por reproduzir em tempo real seu contedo interno;

Movie Clip: fundamental na criao de contedos interativos, por suportar a linguagem de

programao do Flash (ActionScript);

Button: usado para a criao de botes interativos.

6.1.3 CAIXA DE FERRAMENTAS

Na janela Tools (Caixa de Ferramentas) encontram-se todas as ferramentas neces-

srias para a criao de imagens e grcos. Quando selecionamos uma ferramenta, o painel

propriedades exibe as opes de congurao que esto disponveis para a ferramenta sele-

cionada e o painel colors (cores) exibe as opes de cores disponveis.

Existem ferramentas como retngulo, linha, oval, de seleo, lpis e pincel, borracha,

balde de tinta, lao, conta-gotas e texto, tambm presentes em editores de imagens e softwa-

res de animao.Um exemplo de animao com movimento automtico...


62/71

62

Para ilustrar a confeco de uma animao usando o Adobe Flash possvel usar

a funo Motion Tween. Essa funo realiza a movimentao automtica de um elemento

entre dois keyframes, o que tambm chamado de interpolao de movimento. S possvel

us-lo convertendo o elemento a ser animado em um dos tipos de smbolo: Graphic, Movie

ou Button.

Importe uma imagem para dentro da ferramenta pressionando as teclas Ctrl + R,

escolha uma imagem com formato JPEG ou GIF, veja um exemplo na gura 71.

Figura 71: Inserindo um personagem para animao

Converta-o em smbolo teclando F8 e atribua um nome a ele. Para fazer o persona-

gem correr de um lado para o outro clique no frame 30, pressione F6 para criar um keyframe

e arraste o personagem para a direita, veja a gura 72.

Figura 72:Delimitando o trajeto inicial e nal


63/71

63

Clique com o boto direito do mouse em qualquer frame entre os keyframes 1 e 30 e es-

colha a opo Criar Interpolao Clssica (Create Motion Tween). Uma linha contnua aparecer

e os frames entre eles caro em um tom de azul claro, indicando que a animao foi criada de

forma correta. Pressione Ctrl + Enter para gerar a pr-visualizao da sua animao.

UM EXEMPLO DE ANIMAO COM MOVIMENTO GUIADO...

A Linha-Guia (Motion Guide) guia um smbolo por um trajeto determinado. Ela pode

ser feita usando qualquer ferramenta de criao como, por exemplo, o Brush (tecla B), mas

prefervel usar linhas com espessura Hairline, pois assim fcil vericar por onde o sm-

bolo caminhar.

Para o exemplo a seguir coloca-se uma imagem de fundo e uma bolinha vermelha. A

animao consiste em fazer a bolinha vermelha descer e subir o morro, conforme a gura 73.

Figura 73: Bolinha posicionada na cena para descer e subir o morro

Na cena obtm-se duas camadas, uma com o cenrio e outra com a bolinha. Para

inserir camadas, acesse o menu Inserir > Linha do Tempo > Camada. possvel renomear a

camada clicando com o boto direito do mouse sobre a mesma, acessando a opo proprie-

dades. Procure criar cada elemento do cenrio em uma camada diferente.

Crie mais uma camada, nomeie-a como Guia e posicione-a acima da camada em queest a bolinha. Nesta camada, use a ferramenta Pencil (tecla Y) ou Line (tecla N) e dese-

nhe o caminho que o personagem deve seguir, iniciando o desenho em seu centro e seguindo

a forma do morro at chegar ao outro lado algo semelhante gura 74.


64/71

64

Figura 74: Desenho da linha-guia

No frame 60 de cada camada, pressione F5 para adicionar frames e, na camada Bola,

pressione tambm F6 para criar um keyframe. Nesse keyframe, posicione a bolinha no nal

da linha guia desenhada, certicando-se de que o centro do personagem esteja perfeitamente

alinhado ao nal da linha.

Crie uma interpolao clssica usando o Motion Tween entre o Keyframe 1 e 60

(clique com o boto direito do mouse entre os dois keyframes e opte por Criar Interpolao

Clssica) e gere a visualizao da animao Ctrl + Enter.

A bolinha ainda no est seguindo a linha, para isso transforme sua camada em ca-

mada-guia, para que ela possa inuenciar o movimento do smbolo. Para isso, clique com o

boto direito sobre o nome da camada e selecione a opo Guide.

O cone mudar para uma pequena rgua T, mas ainda no est pronto. preciso

vincular a camada que deve usar a linha-guia, clique na camada da bolinha, arraste-a s um

pouquinho para cima e para a direita, at ver o cone da camada-guia escurecer, e solte-a. O

cone Guia muda de uma rgua T para uma bolinha seguindo uma guia pontilhada. Em se-guida, faa o ajuste no da posio inicial e nal do smbolo utilizando o zoom, de modo que

a linha saia exatamente do ponto central do smbolo.


65/71

65

10 ATIVIDADE

Crie um banner para o Instituto Federal do Paran (IFPR), utilizando a logo em uma

camada e a bolinha do i (acento) em outra, de modos que a bolinha pingue no palco at

posicionar-se acima do i.

6.2 PUBLICAO

A forma mais simples de gerar um arquivo nal de sua animao em SWF se resume

a pressionar Ctrl + Enter. Por padro, na mesma pasta onde est salvo o arquivo FLA ser

gerado um arquivo de mesmo nome, mas com extenso SWF. Basta dar um duplo clique nele

para assisti-lo, ou usar algum editor de HTML para inclu-lo dentro do site. Outros formatos

de vdeo tambm s

Documents

Auxiliar Web Design Web1