7/29/2019 Auxiliar Web Design Web1
1/71
7/29/2019 Auxiliar Web Design Web1
2/71
2
7/29/2019 Auxiliar Web Design Web1
3/71
Verso 1
Ano 2012
AUXILIAR EM WEB DESIGNAyslan Trevizan Possebom
Daniela Eloise Flr
Fabiano Utiyama
Luiz Fernando Braga Lopes
7/29/2019 Auxiliar Web Design Web1
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
7/29/2019 Auxiliar Web Design Web1
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.
7/29/2019 Auxiliar Web Design Web1
6/71
7/29/2019 Auxiliar Web Design Web1
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
2.5 Onde estou? O que aprendi?.............................................................................27
Unidade 3
3. CSS...................................................................................................................29
3.1 Mtodos de vinculao......................................................................................30
7/29/2019 Auxiliar Web Design Web1
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
3.10 Onde estou? O que aprendi?.............................................................................46
Unidade 4
4 Introduo a JavaScript..................................................................................48
4.1 Atividades Comentadas.....................................................................................52
4.2 Exerccios de Reviso........................................................................................53
4.3 Onde estou? O que aprendi?.............................................................................53
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
5.4 Onde estou? O que aprendi?.............................................................................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
7/29/2019 Auxiliar Web Design Web1
9/71
6.1.3 Caixa de ferramentas.........................................................................................61
6.2 Publicao..........................................................................................................65
6.3 Atividade Comentada.........................................................................................65
6.4 Exerccios de Reviso........................................................................................66
6.5 Onde estou? O que aprendi?.............................................................................67
Unidade 7
7 Concluso.........................................................................................................68
Bibliograa.........................................................................................................70
7/29/2019 Auxiliar Web Design Web1
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.
7/29/2019 Auxiliar Web Design Web1
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?
__________________________________________________________________________
__________________________________________________________________________
__________________________________________________________________________
7/29/2019 Auxiliar Web Design Web1
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.
7/29/2019 Auxiliar Web Design Web1
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
7/29/2019 Auxiliar Web Design Web1
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.
7/29/2019 Auxiliar Web Design Web1
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
7/29/2019 Auxiliar Web Design Web1
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
7/29/2019 Auxiliar Web Design Web1
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
7/29/2019 Auxiliar Web Design Web1
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
7/29/2019 Auxiliar Web Design Web1
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
7/29/2019 Auxiliar Web Design Web1
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.
7/29/2019 Auxiliar Web Design Web1
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.
7/29/2019 Auxiliar Web Design Web1
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.
7/29/2019 Auxiliar Web Design Web1
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.
Ttulo da pginaTag de Formulrio
Selecione a sua modalidade de luta preferida (Escolha
nica)
KaratTaekwondoKung FuJud
Figura 26: Exemplo da tagde seleo
7/29/2019 Auxiliar Web Design Web1
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.
Ttulo da pginaTag de Formulrio
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
7/29/2019 Auxiliar Web Design Web1
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
7/29/2019 Auxiliar Web Design Web1
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:
7/29/2019 Auxiliar Web Design Web1
27/71
27
5) Faa uma pgina com o seguinte formulrio:
2.5 ONDE ESTOU? O QUE APRENDI?
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
7/29/2019 Auxiliar Web Design Web1
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
7/29/2019 Auxiliar Web Design Web1
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.
7/29/2019 Auxiliar Web Design Web1
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.
7/29/2019 Auxiliar Web Design Web1
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.
7/29/2019 Auxiliar Web Design Web1
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
7/29/2019 Auxiliar Web Design Web1
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);
}
7/29/2019 Auxiliar Web Design Web1
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.
7/29/2019 Auxiliar Web Design Web1
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.
7/29/2019 Auxiliar Web Design Web1
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
7/29/2019 Auxiliar Web Design Web1
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
7/29/2019 Auxiliar Web Design Web1
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.
7/29/2019 Auxiliar Web Design Web1
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.
7/29/2019 Auxiliar Web Design Web1
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
7/29/2019 Auxiliar Web Design Web1
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
7/29/2019 Auxiliar Web Design Web1
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
7/29/2019 Auxiliar Web Design Web1
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
Neymar marca, Santos bate Kashiwapor 3 a 1 e vai nal do Mundial
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
Neymar marca, Santos bate Kashiwapor 3 a 1 e vai nal do Mundial
Texto simples sem formatao de pargrafo
Neymar: perder horrvel,mas somos mais que vencedores
3.9 EXERCCIOS DE REVISO
1) Implemente uma pgina web que contenha quatro pargrafos, conforme a imagem abaixo.
7/29/2019 Auxiliar Web Design Web1
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.
7/29/2019 Auxiliar Web Design Web1
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.
7/29/2019 Auxiliar Web Design Web1
46/71
46
3.10 ONDE ESTOU? O QUE APRENDI?
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?
__________________________________________________________________________
__________________________________________________________________________
7/29/2019 Auxiliar Web Design Web1
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?
__________________________________________________________________________
__________________________________________________________________________
__________________________________________________________________________
7/29/2019 Auxiliar Web Design Web1
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
7/29/2019 Auxiliar Web Design Web1
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().
7/29/2019 Auxiliar Web Design Web1
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
7/29/2019 Auxiliar Web Design Web1
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.
7/29/2019 Auxiliar Web Design Web1
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
7/29/2019 Auxiliar Web Design Web1
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!!!
4.3 ONDE ESTOU? O QUE APRENDI?
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.
Figura 62: Barra de Progresso
7/29/2019 Auxiliar Web Design Web1
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?
__________________________________________________________________________
__________________________________________________________________________
__________________________________________________________________________
7/29/2019 Auxiliar Web Design Web1
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.
7/29/2019 Auxiliar Web Design Web1
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
7/29/2019 Auxiliar Web Design Web1
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
7/29/2019 Auxiliar Web Design Web1
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;
7/29/2019 Auxiliar Web Design Web1
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.
5.3 EXERCCIOS DE REVISO
1) Crie um banner para uma empresa que voc conhece.
5.4 ONDE ESTOU? O QUE APRENDI?
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.
Figura 69: Barra de Progresso
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?
__________________________________________________________________________
__________________________________________________________________________
7/29/2019 Auxiliar Web Design Web1
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.
7/29/2019 Auxiliar Web Design Web1
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...
7/29/2019 Auxiliar Web Design Web1
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
7/29/2019 Auxiliar Web Design Web1
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.
7/29/2019 Auxiliar Web Design Web1
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.
7/29/2019 Auxiliar Web Design Web1
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
Recommended