curso web designer

7/23/2019 Curso Web Designer

1/122

Cursos Online EDUCAwww.CursosOnlineEDUCA.com.br

Acredite no seu potencial, bons estudos!

Curso Gratuito

Web DesignerCarga horria: 60hs


2/122

Contedo HTML 1. DEFINIO........................................................................................................ .01 2. CRIANDO DOCUMENTOS HTML...................................................................... 03 2.1 - ELEMENTOS BSICOS........................................................................ 05

2.1.1 - TTULOS............................................................................................. 05 2.1.2 - CABEALHO...................................................................................... 06 2.1.3 - PARGRAFO...................................................................................... 07 2.1.4 - QUEBRA DE LINHA............................................................................ 08 2.1.5 - COMENTRIOS.................................................................................. 09 2.1.6 - LISTA DE ELEMENTOS BSICOS..................................................... 09 2.1.7 - DICAS.................................................................................................. 10

3. FORMATAO DE TEXTO............................................................................... .11 3.1 - DEFININDO FONTES............................................................................ 11 3.2 - ESTILO DE TEXTOS............................................................................. 12

3.3 - FORMATANDO BLOCO DE TEXTOS................................................... 13 3.3.1 - TAG DIV.............................................................................................. 13

4. CONTROLE DE CORES E GRFICOS DE FUNDO........................................ ..15 4.1 - CORES E ELEMENTOS GRFICOS DE FUNDO................................. 15 4.1.1 - BACKGROUND (IMAGEM DE FUNDO)............................................. 15 4.1.2 - BGCOLOR........................................................................................... 16 4.2 - CORES DE LETRAS E LINKS............................................................... 18 4.2.1 - ATRIBUTO TEXT................................................................................. 18 4.2.2 - ATRIBUTO LINK, VLINK E ALINK....................................................... 19

5. LINKS................................................................................................................. ...21 5.1 - NCORAS............................................................................................. 21

5.2 - INTERLIGANDO

DOCUMENTOS

EM

OUTROS

DIRETRIOS..........

22

5.3 - INTERLIGANDO URL'S........................................................................ 25 5.4 - LINKS PARA E-MAILS.......................................................................... 25

6. LISTAS................................................................................................................ .26 6.1 - LISTAS NO NUMERADAS.................................................................... 26 6.2 - LISTAS NUMERADAS............................................................................. 28 6.3 - LISTA DE DEFINIES.......................................................................... 30 6.4 - LISTA INTERCALADAS........................................................................... 33

7. IMAGENS............................................................................................................ ..35 7.1 - INSERINDO IMAGENS NA PGINA...................................................... 36 7.2 - DIMENSIONANDO IMAGENS................................................................ 37 7.3 - ALINHANDO IMAGENS.......................................................................... 38 7.3.1 - ALINHAMENTO EM RELAO AO NAVEGADOR............................ ..38 7.3.2 - ALINHAMENTO EM RELAO AO TEXTO... ..................................... .39 7.4 - OUTROS ATRIBUTOS........................................................................... ..40

8.TABELAS.......................................................................................................... .....42 8.1 - MARCAES BSICAS...................................................................... ....42 8.2 - DESENVOLVENDO UMA TABELA SIMPLES..................................... ....43 8.3 - ATRIBUTOS DE CONTROLE DE TABELAS....................................... ....45 8.4 - CORES E IMAGEM NA TABELA........................................................... ..56 8.4.1 - CORES NA TABELA........................................................................... ..56 8.5 - IMAGEM DE FUNDO NAS TABELAS.................................................... ..57


3/122

9. CORES............................................................................................................... 55 9.1 - MATIZ, SATURAO E TONALIDADE................................................ 55 9.2 - SISTEMA DE REPRESENTAO DAS CORES.................................. 55 9.3 - PSICOLOGIA DAS CORES................................................................... 56

10. TIPOLOGIA...................................................................................................... 59

10.1 - ESTILO ANTIGO.................................................................................... 59 10.2 - ESTILO MODERNO............................................................................... 60 10.3 - SERIFA GROSSA.................................................................................. 61 10.4 - SEM SERIFA...................................................................................... ....62 10.5 MANUSCRITO................................................................................... ....62 10.6 DECORATIVO....................................................................................... 63

PHOTOSHOP

11. FERRAMENTAS DO PHOTOSHOP............................................................. ..64

11.1 INICIANDO O PHOTOSHOP.............................................................. 64 EXERCCIOS PARA REVISO..................................................................... 66

12. VISUALIZANDO AS IMAGENS.................................................................... ..67 EXERCCIOS PARA REVISO..................................................................... 68

13. SELECIONANDO E MOVENDO IMAGENS.................................................. .69

13.1 MARCA DE SELEO....................................................................... 69

13.2

LAO..................................................................................................

70

13.3 VARINHA MGICA............................................................................. 71 13.4 CORTE DEMARCADO...................................................................... ..73 EXERCCIOS PARA REVISO..................................................................... 73

14. MODIFICANDO AS SELEES................................................................... .74

14.1 FILTROS............................................................................................. 75 EXERCCIOS PARA REVISO..................................................................... 76

15. TRANSFORMANDO AS SELEES............................................................ .77

15.1 PINCEL............................................................................................... 78 15.2 FERRAMENTA DEGRAD................................................................ .78 15.3 CARIMBO........................................................................................... 80 15.4 DESFOQUE, NITIDEZ E BORRAR.................................................... 81 EXERCCIOS PARA REVISO..................................................................... 81

16. FERRAMENTAS DE TEXTO.......................................................................... 82 EXERCCIOS PARA REVISO..................................................................... 84

17. CRIAES DE ARQUIVOS PARA WEB...................................................... .86 EXERCCIOS PARA REVISO..................................................................... 88

18. VOCABULRIO UTILIZADO NO PHOTOSHOP......................................... ..89

19. SEJA UM BOM WEB DESIGNER.................................................................. 91


4/122

DREAMWEAVER

20. APRESENTANDO O DREAMWEAVER......................................................... 93

20.1 BARRA DE TTULOS.......................................................................... 94 20.2 BARRA DE MENUS............................................................................ 94

20.3 BARRA INSERIR................................................................................. 94 20.4 BARRA DE FERRAMENTAS DOCUMENTOS................................... 94 20.5 PAINIS............................................................................................... .95 20.6 GRUPOS DE PAINIS........................................................................ 95 20.7 REA DE DESENVOLVIMENTO........................................................ 95 20.8 VISUALIZAO DO DREAMWEAVER............................................... 95 20.9 BARRA DE STATUS........................................................................... 96 20.1.1 MENUS CONTEXTUAIS................................................................... 96 EXERCCIOS PARA REVISO...................................................................... 96

21. CRIANDO UM NOVO SITE............................................................................. .97

22. INICIANDO UMA PGINA NO DREAMWEAVER.......................................... 98

22.1 CRIANDO E SALVANDO UMA NOVA PGINA..................................... 98 22.2 CRIANDO O ARQUIVO INDEX.HTM...................................................... 98 22.3 DEFININDO AS PROPRIEDADES DA PGINA..................................... 99 22.4 INSERINDO TABELAS.......................................................................... 100 22.5 MAPEAMENTO DE IMAGENS.............................................................. 101 EXERCCIOS PARA REVISO......................................................................... 102

23. LINKS E NAVEGAO.................................................................................. 103

23.1 LOCALIZAO E CAMINHOS DOS DOCUMENTOS............................. 103 23.2 TESTANDO A PGINA............................................................................ 105

EXERCCIOS PARA REVISO............................................................................ 106

24. FORMULRIOS.............................................................................................. 107 25. DICAS PARA A CRIAO DE UM SITE....................................................... 110

25.1 DEFINIR O CONTEDO, O QUE SER DIVULGADO NO SITE......... 110 25.2 ESTABELECER OBJETIVOS............................................................... 110 25.3 DIVIDA SEUS CONTEDOS EM TPICOS........................................ 111 25.4 QUAIS AS QUESTES QUE DEVO LEVANTAR COM RELAO ORGANIZAO E NAVEGAO DE UM SITE?...................................... 111 25.5 Prxima etapa do planejamento............................................................ 111


5/122

1 . DEFINIO Os arquivos em HTML - HyperText Markup Language - Linguagem de Formatao de

Hipertexto - pode ser gerados em qualquer editor de texto. possvel transformar um arquivo .doc (formato Word) para HTML.

A linguagem HTML utiliza marcaes especficas e distintas para dizer ao navegador (Internet

Explorer, Firefox, Mozilla, e outros) como exibir o documento. Os comandos HTML so chamados de TAGS, compreende as marcas padres que so

utilizadas para fazer indicaes a um browser. Assim como em outras linguagens, os comandos tm uma sintaxe prpria e seguem algumas regras:

As TAGs aparecem sempre entre os sinais de menor que (); Geralmente so utilizados em pares , sendo que a TAG de finalizao de um comando precedida de uma barra (/).

A maioria das etiquetas tem a sua correspondente de fechamento:

.............................................

De um modo geral, as tags aparecem em pares, por exemplo:

Cabecalho

Onde:

A tag indica o incio na instruo;

O texto Cabealho indica o texto que ser formatado;

E a tag indica o final da instruo.

O smbolo que termina uma determinada etiqueta igual aquele que a inicia, antecedido por uma barra ( / ) e precedido pelo texto referente.

As etiquetas so necessrias, pois servem para definir a formatao de um bloco de texto, e assim marcamos onde comea e termina o texto com a formatao especifica por ela.

____________________________________________________________ Pgina - 1 -


6/122

H excesses para a utilizao dos pares de etiquetas. Por exemplo, a que indica um final de

um pargrafo:

no necessita de uma correspondente
para terminar a formatao do bloco de texto. A etiqueta que indica quebra de linha
tambm no precisa de etiqueta correspondente, entre
outras.

____________________________________________________________ Pgina - 2 -


7/122

2 . CRIANDO DOCUMENTOS HTML Todo documento HTML precisa conter certas tags padronizadas, no mnimo ,

, e , pois elas constituem as duas partes bsicas de um documento HTML que so: o HEAD (cabealho) e o BODY (corpo do documento).

Curso de WebDesign

Este o primeiro nvel de cabealho.

Bem-vindo ao mundo do HTML. Este o primeiro pargrafo.

Este o segundo paragrfo

A tag contm, entre outras coisas, o (ttulo), e a tag armazena todo o contedo do documento, normalmente composto de pargrafos, listas, tabelas, etc.

Para interpretar corretamente o contedo do documento HTML, os browsers esperam informaes em acordo com as especificaes HTML.

Abra o bloco de notas, e digite o cdigo acima e salve-o como primeiro.html. Em seguida, abra

arquivo primeiro.html no navegador (Internet Explorer, ou outro).

____________________________________________________________ Pgina - 3 -


8/122

1.1 Modelo de arquivo HTML Explicao:

A primeira TAG que encontramos no documento . Ela o elemento raiz de um documento HTML, pois dentro dela est todo o contedo da pgina. Esta tag diz ao navegador para iniciar

um novo documento HTML, onde o contedo que dever ser exibido esta entre as tags e .

O texto contido ente as TAG e define o cabealho do documento. Estas informaes so importantes pois indicam ao navegador a forma que a pgina deve ser apresentada graficamente.

A tag define o ttulo da pgina. Observe a figura 1.1 o topo do navegador, est informado Curso de WebDesign.

A tag informa ao navegador o que dever ser exibido graficamente. O corpo da pgina BODY constituido pelo contedo que est entre as tags e .

____________________________________________________________ Pgina - 4 -


9/122

2.1 ELEMENTOS BSICOS

2.1.1 TTULOS

Todo documento em HTML deve possuir um ttulo. O ttulo exibido em local separado da pgina, e utilizado para identificar o documento em outros contextos, de modo que o ttulo deve indicar claramente o contedo do documento.

As tag utilizadas para ttulos so: e .

Este o ttulo E este o cabealho de nvel 2 Aqui entra o texto do documento ...

Fgura2.1 Modelo de ttulo

2.1.2 CABEALHO

Os cabealhos normalmente so usados para ttulos e sub-ttulos de uma texto da pgina. A linguagem HTML possui seis nveis de cabealhos, numerados de 1 a 6; quanto menor o nvel, maior ser o destaque.

Em geral, os cabealhos so exibidos em letras maiores e em negrito, e o HTML adiciona uma

linha em branca antes e depois do cabealhos. O primeiro cabealho de uma pgina deve ser marcada como .

____________________________________________________________ Pgina - 5 -


10/122

COMANDO:

Texto do Cabealho

Onde o y um nmero que poder ser especificado entre 1 a 6, definindo o nvel do cabealho.

COMANDO:

Cabealho nvel 1 Cabealho nvel 2 Cabealho nvel 3 Cabealho nvel 4 Cabealho nvel 5

Cabealho nvel 5

Fgura 2.1 Modelo de Cabealhos

____________________________________________________________ Pgina - 6 -


11/122

2.1.3 PARGRAFO

A tag

utilizada para definir o nicio de um pargrafo, criando uma linha em branco entre

cada pargrafo. O tag

tambm responsvel pelo alinhamento dos pargrafos.

O alinhamento pode ser:

LEFT : Pargrafo alinhado a esquerda. CENTER: Pargrafo alinhado ao centro. RIGHT: Pargrado alinhado a direita. JUSTIFY : Pargrafo justificado.

Alinhamento de pargrafos

Este pargrafo utiliza o alinhamento padro dos navegadores de Internet (esquerdo).

Este pargrafo utiliza o alinhamento centralizado

Este pargrado utiliza o alinhamento direita.

Fgura 2.2 Modelo de alinhamento de pargrafos

____________________________________________________________ Pgina - 7 -


12/122

2.1.4 QUEBRA DE LINHA

A tag
usada para terminar uma linha sem iniciar um novo pargrafo. Esta tag
, ou

line break, provoca uma mudana de linha sem acrescentar espao extra entre as linhas.

Veja a diferena entre o uso da tag

e da tag
:

MODELO I

Utilizando a tag p Vamos separar esta linha com a marcao de paragrfo.

Para verificar a diferena.

MODELO II

Utilizando a tag br Diferena quando separamos duas linhas utilizando
a marcao de quebra de linha
Diferena quando separamos duas linhas utilizando
a marcao de quebra de linha
Verificou a diferena?

Fgura 2.3 Modelos de quebra de linha

____________________________________________________________ Pgina - 8 -


13/122

2.1.6 LISTA DE ELEMENTOS B SICOS

2.1.5 COMENTRIOS

Os comentrios servem para dizer ao navegador que o contedo apenas anotaes e que no devem ser apresentados graficamente na pgina.

Os comentrios so utilizados para explicar o cdigo fonte para que mais tarde seja possvel compreender o que foi feito.

COMANDO:

____________________________________________________________ Pgina - 9 -

ELEMENTOS DESCRI O

Elemento que contm todas as instrues para pgina HTML

Elemento que define o ttulo da pgina.

Elemento que contm o corpo body da pgina.

... Elemento que define cabealhos, desde de o nvel 1 (maior destaque) at o nvel 6

(menor destaque).

Elemento de definio de pargrafos.

Elemento que provoca quebra de linha no contudo da pgina.


14/122

2.1.7 DICAS

Quando criamos pginas em HTML devemos ter sempre ateno ao fato delas poderem ser apresentadas de forma diferente em cada navegadores (browsers) ou em conmputadores diferentes. O ASPECTO GRFICO PODE DIFERIR ENTRE COMPUTADORES OU ENTRE NAVEGADORES ! Isso ocorre no s pela diferena ente os sistemas, mas tambm pelo fato de que os usurios possuem monitores diferentes e podem redimensionar a janela do navegador para o tamanho que prefirirem.

As diferenas nos tamanhos das janelas dos navegadores fazem com que o nmero de linhas varie muito. Por esse motivo no seremos capazes de controlar nem o nmero de linhas nem os locais em que acontecem as mudanas de linhas.

Sempre que quiser inserir linhas em branco use
.

J observou alguma vez uma pgina da internet, e se perguntou: Quais as instrues que foram utilizadas?. Se estiver utilizando o Internet Explorer e quiser descobrir as instrues, v at o menu Exibir e escolha a opo Cdigo Fonte , ou clique com o boto direito do mouse e selecione a opo Exibir Cdigo Fonte.

No desanime se o aspecto do cdigo fonte lhe aparecer assustador. Se esse for o caso, pode ter certeza que a pgina que est visualizando foi feita por um programa especfico. Ao longo do curso, ser possvel verificar que o cdigo HTML bem escrito a mo muito fcil de ler, mas muitas pessoas complicam o cdigo para confundir.

____________________________________________________________ Pgina - 10 -


15/122

REVISO CPITULO 1 e 2 1) Qual o smbolo que determina o fechamento de uma tag?

2) Quais os elementos bsicos de uma pgina HTML?

3) Qual a diferena entre a tag

e a tag
?

4) Quando utilizamos os comentrios?

______________________________________________________________________ Exerccios Reviso


16/122

3 . FORMATAO DE TEXTOS 3.1DEFININDO FONTES

A tag permite que voc insira em sua pgina um texto com fontes, tamanhos, cores e

tipos diferentes.

COMANDO:

Texto

Onde:

SIZE: indica o tamanho da fonte que varia de 1 a 7, sendo 3 o valor padro da maioria dos navegadores. FACE: indica o nome da fonte utilizada. As fontes padres da maioria dos navegadores so: ARIAL, TIMES NEW ROMAN, GEORGIA, COURIER, VERDANA. COLOR : Define a cor da fonte do texto, em hexadecimal.

Fgura 3.1 Modelo de Formatao de Fontes

____________________________________________________________ Pgina - 11 -


17/122

itlico ou sublinhado.

Caso a fonte utilizada na pgina no esteja disponvel para o usurio que visit-la, a fonte ser substituida ento pela fonte padro do navegador utilizado pelo usurio.

Pode-se definir mais de uma fonte FACE, pois caso a primeira no esteja instalada no sistema

do usurio, o navegador reconhe a prxima fonte definida.

3.2 ESTILO DE TEXTOS

O HTML define muitos elementos para formatar textos, como por exemplo escrever em negrito,

COMANDO:

Exemplo Isto texto em negrito
Isto texto forte
Isto texto maior
Isto texto enfatizado
Isto texto itlico
Isto texto mais pequeno
Este texto contm uma parte alinhada mais abaixo
Este texto contm uma parte alinhada mais acima

____________________________________________________________ Pgina - 12 -

ELEMENTO DESCRI O

Define texto escrito em negrito.

Define texto com letra maior.

Define texto enfatizado. (escrita com caracteres itlicos)

Define texto escrito com caracteres itlicos.

Define texto com letra menor.

Define texto forte (escrita com caracteres em negrito)

Texto subscrito (alinhado um pouco mais para baixo)

Texto sobrescrito (alinhado um pouco mais para cima)

Texto pulsante


18/122

Fgura 2.4 Modelo de formatao de texto

3.3FORMATANDO BLOCO DE TEXTOS

3.3.1 TAG DIV

A tag permite alinhar horizontalmente qualquer elemento em sua pgina. O alinhamento

pode ser: left, center ou right.

Onde a posio pode ser:

LEFT: Alinhamento a esquerda; CENTER: Alinhamento centralizado; RIGHT: Alinhamento a direita.

O padro de alinhamento da tag a esquerda.

COMANDO:

Elementos a serem alinhados

ALINHAMENTO DE ELEMENTOS COM A TAG DIV Usando a TAG DIV

Usando a tag DIV possvel alinhar o texto sem problemas

Pode utilizar o alinhamento a direita que alinha o seu texto na margem direita da

tela.
Como um texto criado em um editor de texto para ser exibido na pgina.

____________________________________________________________ Pgina - 13 -


19/122

REVISO CAPTULO 3 1) Qual a tag utilizada para formatar textos?

2) O que significa os atributos FACE e SIZE?

3) Quais tags utilizarei para:

a) Exibir o texto em negrito:____________________________________________________________ b) Exibir o texto em itlico: ____________________________________________________________

2) Qual a funo da tag ?



20/122

4 . CONTROLE DE CORES E GRFICOS DE FUNDO Uma cor ou imagem de fundo bem escolhidos podem melhorar o aspecto da pgina, mas uma

m escolha capaz de causar danos muito graves na legibilidade e no aspecto geral. A maioria dos browsers permite a utilizao de cores, apenas 256, mas j o suficiente para

criar uma pgina com fundo e textos personalizados.

As cores so compostas por cdigo RGB (red, green, blue). Cada cdigo define a intensidade

do vermelho, do verde e do azul.

4.1CORES E ELEMENTOS GRFICOS DE FUNDO

4.1.1 BACKGROUND (IMAGEM DE FUNDO)

O atributo background deve ser aplicado tag , que especifica uma imagem que ser utilizada como fundo de uma pgina, sendo que a imagem ocupar toda a rea de fundo da tela.

COMANDO:

Corpo da pgina

Imagem de fundo - BACKGROUND Imagem de fundo
Background

Com esse atributo voc insere imagem de fundos nas pginas.

____________________________________________________________ Pgina - 14 -


21/122

Fgura 4.1 Modelo do atributo background

4.1.2 BGCOLOR

O atributo BGCOLOR o atributo que determina a cor de fundo da pgina, permitindo que se

defina uma cor de fundo padro para a pgina sem a necessidade de utilizar um arquivo de imagem.

COMANDO:

Corpo da pgina

Cor de fundo - BGCOLOR Cor de Fundo
BGCOLOR

Com esse atributo voc controla a cor de fundo das pginas.

____________________________________________________________ Pgina - 15 -


22/122

Fgura 4.2 Modelo de uso do atributo BGCOLOR

DICAS:

importante ter cuidado ao aplicar elementos de fundo, para no prejudicar a leitura

dos textos. interessante sempre visitar outras pginas que utilizam este recurso para recolher boas idias. Para tornar a visualizao das pginas mais rpidas, alguns usurios no utilizam imagens em suas pginas, em vez disso utilizam o atributo BGCOLOR.

____________________________________________________________ Pgina - 16 -


23/122

4.2CORES DE LETRAS E LINKS

4.2.1 ATRIBUTO TEXT

O atributo TEXT utilizado para controlar a cor do texto normal de uma pgina, ou seja, define

a cor de todo o texto do documento, execeto os links.

O atributo TEXT inserido na tag , tendo como padro a cor preto (#000000).

COMANDO:

Corpo da Pgina

Cor de texto - TEXT CORES DE LETRAS DE TEXTO NORMAL

Com esse atributo voc controla a cor do texto em uma pgina.

Fgura 4.3 Modelo do uso do atributo TEXT

____________________________________________________________ Pgina - 17 -


24/122

4.2.2 ATRIBUTO LINK, VLINK E ALINK

Os atributos LINK, VLINK e ALINK fazem o controle das cores do textos que funcionam como

link na pgina.

LINK: Define cores de links no visitados. Cor padro o AZUL. VLINK: Define as cores dos links j consultados. Cor padro vermelho-prpura. ALINK: Define as cores dos links selecionados, ou seja, quando o usurio pressionou o boto do mouse e ainda no soltou. Cor padro vermelho.

COMANDO:

Corpo da pgina

Cor de Links - LINK VLINK ALINK EXEMPLO DE CORES

O fundo da pgina est com uma cor especial:
Lightyellow - RGB : #FFFFE0
Alink = GreenYellow - RGB:"#ADFF2F"
Link = MediumBlue RGB:"#0000CD"

Vlink = Aquamarine- RGB: "#7FFFD4"

____________________________________________________________ Pgina - 18 -


25/122

Fgura 4.4 Modelo de cores de Links

____________________________________________________________ Pgina - 19 -


26/122

REVISO CAPTULO 4

1) Porque importante ter cautela ao utilizar cores e imagens de fundo em pginas para WEB?

2) Qual a diferena entre o atributo BACKGROUND e BGCOLOR?

3) O atributo TEXT utilizado em qual TAG?

4) Defina os atributos: a) LINK: _____________________________________________________________________________

b) VLINK: ____________________________________________________________________________

c) ALINK: ____________________________________________________________________________



27/122

5 . LINKS O principal poder do HTML, est na capacidade de ligar partes de textos e imagens a outros

documentos. A interligao entre documentos feito utilizando a tag , e no se restringe apenas a outras pginas. Os links podem apontar para qualquer recurso disponvel na WEB, podendo ser uma pgina

em HTML, uma imagem, um arquivo de som, um filme, etc.

5.1NCORAS

As ncoras so links que utilizamos quando queremos buscar o contedo na mesma pgina. So muito utilizadas em pginas que tm o contedo extenso, onde definimos sees na pginas, sendo que cada seo ter um nome que servir de referncia para o link.

Para criarmos uma ncora selecionamos um local da pgina para inser-la.

Onde:


28/122

Onde:


29/122

Vamos imaginar a seguinte situao: Estamos na pgina materias.html, localizada no diretrio materias, dentro do diretrio pagina1,

e ao clicarmos no link Pgina Inicial queremos que nos posicione na index.html que esta fora do diretrio

pagina1. Como fazemos?

Fgura 5.2 Modelo de nveis de diretrios

Na pgina materias.html devemos escrever o cdigo mencionado abaixo:

LINK PARA OUTRO DIRETRIO Pgina Matrias

Modelo de interligao de documentos localizados em nvel diferente.
Pgina Inicial

Observe a linha:

Pgina Inicial

Sendo que:


30/122

O visitante da pgina apenas visualizar a palavra indicada entre as tags , que no caso citado acima a palavra Pgina Inicial.

5.3INTERLINGANDO URL's

Para criarmos um link para qualquer endereo localizado na internet, utilizamos uma URL. URL a abreviao de Uniform Resource Locator, que tem a funo de especificar a

localizao de pginas ou arquivos em servidores da WEB.

A URL composta de duas partes:

1) O protocolo Internet do documento; 2) O endereo do servidor da pgina.

texto ou imagem

Onde:

O protocolo: o tipo de servidor que est sendo acessado; Os mais utilizado so:

HTTP: = Hiper Text Transfer Protocol, um servidor da www. FTP: = File Transfer Protocol, um servio para a troca de arquivos, programas entre o servidor e o computador remoto. Servidor = Entenda como servidor o computador onde a pgina est localizada. Arquivo = o arquivo que deseja ser visualizado, podendo ser um diretrio e o nome

do arquivo.

5.4LINKS PARA E-MAILS

possvel colocar links para e-mail em pginas HTML. Ao clicar sobre o link do e-mail, abrir o

programa de envio de e-mail, podendo ser este o OULTLOOK EXPRESS ou outro que estiver configurado

no computador.

Texto ou Imagem

Onde:

mailto = informa ao navegador que o link para e-mails;

endereo = dever ser informado o e-mail que ser direcionada as mensagens.

____________________________________________________________ Pgina - 23 -


31/122

REVISO CAPTULO 5 1) Qual a tag utilizada para indicar links?

2) O que so ncoras? E para que servem?

3) Como fazer links com arquivos que esto em outros diretrios, o que utilizamos?

4) Escreva o comando para fazer links para e-mails.



32/122

6 . Listas As listas so utilizadas para organizar os contedos das pginas, servindo como resumos ou

ndices dos sites. As listas podem conter links para outras pginas, para arquivos ou outros sites. Existem 4 tipos de listas, sendo estas:

LISTA NO NUMERADA; LISTA NUMERADA LISTA DE DEFINIES LISTA INTERCALADAS.

6.1 LISTAS NO NUMERADAS

As listas

no

numeradas

inserem

marcadores

na

frente

de

cada

item.

Comando:

Item 1

Item 2 Item 3

Onde:

: indica o nicio da lista pontuada;

TYPE=formato: indica o formato do marcador da lista, pode ser:

disc : formato de ponto (padro utilizado pelos navegadores); square: formato de quadrado; circle: formato de crculo;

: indica os tpicos da lista. : indica o fim da lista.

____________________________________________________________ Pgina - 24 -


33/122

Listas no numeradas

Listas no numeradas Type = "disc" Item 1 Item 2 Item 3 type="square" Item 1 Item 2 Item 3 type = "circle" Item 1 Item 2 Item 3

Fgura 6.1 Modelo de lista no numerada

____________________________________________________________ Pgina - 25 -


34/122

6.2 LISTAS NUMEREDAS

A lista numerada semelhante a lista no numerada, porm no lugar de marcadores inserido

na pgina uma lista numrica ou alfabtica, com valor pr-definido ou no.

Comando:

Item 1

Item 2

Item 3

Onde:

OL: indica o nicio da lista numerada.

Type=formato : indica o formato da numerao da lista, que pode ser: 1: Lista numrica A: Lista alfabtica com letras maisculas; a: Lista alfabtica com letras minsculas; I : Lista numrica com nmeros romanos maisculos; i : Lista numrica com nmeros romanos minsculos.

START=n : indic o valor inicial da lista numerada; : indica o tpico da lista. indica o fim da lista numerada.

Listas numerada

Listas numeradas Lista numerada padro

Item 1 Item 2 Item 3

Lista numerada padro com START="10" Item 1 Item 2 Item 3

Lista alfabtica com letras maisculas Item 1 Item 2

Item 3

____________________________________________________________ Pgina - 26 -


35/122

Fgura 6.2 Modelo de Lista numerada

6.3 LISTAS DE DEFINIES

A lista de definies so diferentes da demais listas, pois cada item da lista possui dois elementos: um item e uma descrio do item.

Comando:

Item 1 Descrio do Item 1

Item

2

Descrio do Item 2

Onde:

: indica o nicio da lista descritiva;

: indica o item da lista; : indica a descrio do item da lista ; : indica o fim da lista.

____________________________________________________________ Pgina - 27 -


36/122

NOTA:

Para cada tag existe uma tag No necessrio encerrar as tags e

Listas de Definies

Listas de Definies

Listas no numeradas

As

listas

no

numeradas

ou

pontuadas

inserem

marcadores

na

frente

de

cada item.

Lista numeradas As listas numeradas inserem nmeros ou letras na frente de cada item.

Lista de Definies As listas de definies so diferentes das demais listas pois possuem

dois elementos: o item e a descrio do item.

____________________________________________________________ Pgina - 28 -


37/122

Fgura 6.3 Modelo de lista de definies

6.4 LISTAS INTERCALADAS

As listas intercaladas so utilizadas para melhor organizar as estruturas dos itens, podendo criar hierarquias, unindo listas numeradas com listas no numeradas.

Listas Intercaladas

Lista Intercaladas

Estados da Regio Sul Paran Santa Catarina

Estados da regio Sudeste

So Paulo Rio de Janeiro Minas Gerais

____________________________________________________________ Pgina - 29 -


38/122

Fgura 6.4 Modelo de Lista Intercalada

____________________________________________________________ Pgina - 30 -


39/122

REVISO CAPTULO 6 1) Para que servem as listas?

2) Defina:

a) LISTA

NO

NUMERADA: ________________________________________________________________

______________________________________________________________________________________ _

b) LISTA NUMERADA:____________________________________________________________________

______________________________________________________________________________________ _

c) LISTA DE DEFINIES: ________________________________________________________________

______________________________________________________________________________________ _

d) LISTA INTERCALADA:_________________________________________________________________

3) A tag utilizada para indicar qual tipo de lista?

4) Para escreve uma lista alfabtica, qual o comando devo utilizar? Escreva o comando.

5) Qual a diferena entre a lista de definies das demais listas?



40/122

7 . Imagens Hoje em dia, a grande maioria dos navegadores exibem imagens dispostas em sites, porm as

imagens possuem formatos especficos, pois no qualquer tipo de arquivo de imagem que deve ser inserido em uma pgina para WEB.

Os formatos mais aceitos so os arquivos com a extenso: .GIF ou . JPEG (JPG).

O formato GIF (Grafic Interchange Format) suporta no mximo 256 cores e gera imagens com

tamanhos menores. Este formato muito utilizado para desenhos ou grficos, gerando arquivos com a extenso .GIF.

J o formato JPEG (Joint Photografic Engineering Group) suporte 16 milhes de cores e pode

reduzir o tamanho de uma imagem em at 10 vezes. Este formato muito utilizado para fotos, gerando arquivos com a extenso .JPEG ou JPG.

Ao utilizar gifs animados, tenha cuidado, pois estes arquivos podem ocupar bastante espao em disco. O tamanho dos gifs animados depender da quantidade de cores e quadros utilizados para a animao.

Estes detalhes faro com que sua pgina carregue mais rpido no navegador do usurio, tornado assim a visitao ao site mais agradvel.

____________________________________________________________ Pgina - 31 -


41/122

7.1 INSERINDO IMAGENS NA PGINA

Comando:

Onde:

: tag que indica que h uma imagem na pgina. Src =diretorio/arquivo : atributo que indica o diretrio e a imagem que dever ser exibida.

Fgura 7.1 Modelo de insero de imagens

____________________________________________________________ Pgina - 32 -


42/122

7.2 DIMENSIONANDO IMAGENS

Todas as imagens possuem um tamanho x e y, sendo x sua largura e y a sua altura. O

tamanho das imagens exibidas no navegador pode ser redimensionada.

Para redimensionar a imagem utilizamos dois atributos: o WIDHT e o HEIGHT.

Comando:

Onde:

Widht=n: indica a largura da imagem em pixels. Height=n : indica a altura da imagem em pixels.

Fgura 7.2 Modelo de redimensionamento de imagens

NOTA:

MUITO CUIDADO, ao redimensionar imagens, pois elas podem perder a

sua definio, ficando com o aspecto distorcido.

____________________________________________________________ Pgina - 33 -


43/122

7.3 ALINHANDO IMAGENS

As imagens inseridas em uma pgina podem ser posicionadas na tela da seguinte forma: TOP,

MIDDLE, BOTTOM,

LEFT

e

RIGHT.

O

atributo

utilizado

para

alinhar

a

imagem

o

ALIGN.

Comando:

7.3.1 ALINHAMENTO EM RELAO AO NAVEGADOR

Em relao ao navegador, utilizamos duas posies sendo estas:

LEFT: Alinha a imagem a esqueda. (posio padro dos navegadores)

RIGHT : Alinha a imagem a direita.

Alinhando Imagens

Alinhamento de Imagens

Alinhamento a Esquerda

Alinhamento a Direita

____________________________________________________________ Pgina - 34 -


44/122

Fgura 7.2 Modelo de alinhamento de imagens ao navegador

7.3.2 ALINHAMENTO EM RELAO AO TEXTO

Em relao ao texto podemos utilizar os seguintes alinhamentos: TOP, BOTTOM e MIDDLE.

Onde:

TOP: Alinha o texto com o topo da imagem; MIDDLE: Alinha o texto com o centro da imagem; BOTTOM: Alinha o texto com o rodap da imagem.

____________________________________________________________ Pgina - 35 -


45/122

Fgura 7.3 Modelo de alinhamento de imagem ao texto

7.4 OUTROS ATRIBUTOS

O atriibuto ALT utilizado para exibir uma mensagem quando a imagem est sendo carregada.

Tambm tem a funo de especificar ou indicar a imagem, quando o cursor do mouse colocado sobre ela.

Comando:

Onde:

ALT = mensagem : indica a mensagem que ser exibida quando o cursor do mouse for colocado sobre a imagem.

____________________________________________________________ Pgina - 36 -


46/122

Fgura 7.5 Modelo de utilizao do atributo ALT

Redimensionado Imagens

Redimensionamento de Imagens

____________________________________________________________ Pgina - 37 -


47/122

REVISO - CAPTULO 7 1) Quais os formatos de arquivos de imagens mais indicados para WEB?

2) Qual a diferena entre as imagens no formato GIF e JPG?

2) Defina os alinhamentos:

a) TOP: ________________ ________________________________________________________________

______________________________________________________________________________________ _

b) MIDDLE: _____________________________________________________________________________

______________________________________________________________________________________ _

c) BOTTOM : ___________________________________________________________________________

______________________________________________________________________________________ _

d) LEFT: _______________________________________________________________________________

e) RIGHT: ______________________________________________________________________________

5) O atributo ALT utilizado para:



48/122

8 . Tabelas As tabelas so muito utilizadas na internet hoje em dia, para estruturar o layout das pginas,

para organizar dados, etc. Em uma tabela podemos inserir textos, imagens, links e outros elementos e ainda podemos

utilizar uma tabela dentro outra tabela.

No primeiro contato, possvel achar difcil a compreenso das tags utilizadas para estruturar

as tabelas, mas com o uso tornar mais fcil a utilizao e a interpretao de possveis falhas que um editor

de HTML qualquer possa gerar.

8.1MARCAES BSICAS

Esta tag indica o nicio e o fim da tabela. O atributo border insere uma borda para marcar a diviso das clulas.

Esta tag indica as linhas da tabela.

Esta tag indica as clulas contidas em cada linha da tabela. nesta tag que inserimos os dados que sero exibidos na tabela.

Esta tag define os ttulos de uma tabela, podendo ser utilizado em qualquer clula. A diferena

entre a tag e a tag que o contedo inserido entre as tags ser exibido em negrito.

Esta tag

insere

a

legenda

da

tabela.

Deve

ser

inserida

entre

as

tags

.

____________________________________________________________ Pgina - 38 -


49/122

8.2DESENVOLVENDO UMA TABELA SIMPLES

Com base no contedo do item acima, vamos desenvolver nossa primeira tabela.

1. MODELO

Primeira Clula 1 Linha Segunda Clula 1 Linha

Primeira Clula 2 Linha Segunda Clula 2 Linha

Onde o comando acima ir ser exibido da seguinte forma:

Fgura 8.1 Primeiro modelo de tabela

____________________________________________________________ Pgina - 39 -


50/122

2. MODELO

Modelo 2 de Tabelas Simples

Itens/Ms Janeiro Fevereiro Maro

Usurios 100 200 300

Linhas

1 2 3

Fgura 8.2 Segundo exemplo de tabela

____________________________________________________________ Pgina - 40 -


51/122

8.3ATRIBUTOS DE CONTROLE DE TABELAS

WIDTH

Este atributo utilizado para alterar a largura da tabela e das clulas em relao ao navegador. Os valores inseridos podem ser em pixel ou em percentuais, ou seja, este atributo determina a

rea da tela que a tabela ir ocupar.

Comando:

1 MODELO WIDTH na tag

Segunda Tera Quarta

Quinta Sexta Sbado

____________________________________________________________ Pgina - 41 -


52/122

Fgura 8.3 Modelo de atributo width na tabela

2 MODELO WIDTH na tag

Segunda Tera Quarta

Quinta Sexta Sbado

____________________________________________________________ Pgina - 42 -


53/122

Fgura 8.4 Modelo de atributo width na tag

BORDER

O atributo border utilizado na tag , para definir se a tabela ser exibida com linhas

de contorno. Caso o atributo no esteja informado, a tabela aparecer sem bordas.

Observe:

Fgura 8.5 Modelo do uso do atributo BORDER

____________________________________________________________ Pgina - 43 -


54/122

Modelo de uso utilizando o atributo BORDER

Tabelas Atributos BORDER

1 2 3

Modelo de uso sem o atributo BORDER

Tabelas Atributos BORDER

1

2 3

ALIGN

O atributo ALIGN controla o alinhamento da tabela em relao a pgina. Pode se utilizado nas

tags , onde este alinhar o texto contidos nas clulas a posio informada no ALIGN.

O atributo ALIGN aceita as seguintes posies: LEFT : alinhamento a esquerda; RIGHT: alinhamento a direita; CENTER: alinhamento centralizado.

____________________________________________________________ Pgina - 44 -


55/122

Fgura 8.6 Modelo de uso do atributo ALIGN

Modelo de uso do atributo ALIGN na tag

Tabelas Atributos ALIGN - tag TABLE

1 2 3

____________________________________________________________ Pgina - 45 -


56/122

Modelo de uso do atributo ALIGN na tag

Tabelas Atributos ALIGN - tag TD e TH

1 2 3

Alinhamento CENTER Alinhamento LEFT

Alinhamento

RIGHT

VALIGN

O atributo VALIGN controla o alinhamento do contedo das clulas em relao a borda superior e inferior. Pode se utilizado nas tags .

O atributo VALIGN aceita as seguintes posies: TOP : alinhamento ao topo; MIDDLE: alinhamento ao centro; BOTTOM: alinhamento ao rodap.

____________________________________________________________ Pgina - 46 -


57/122

Fgura 8.7 Modelo de uso do atributo VALIGN

Modelo de uso do atributo VALIGN

Tabelas

Atributos VALIGN

1 2 3

Alinhamento TOP Alinhamento MIDDLE

Alinhamento BOTTOM

____________________________________________________________ Pgina - 47 -


58/122

CELLSPACING

O atributo CELLSPACING define a distncia entre as clulas e linhas, sendo aplicavl a tag . Os valores informados neste atributo so em pixels.

Fgura 8.8 Modelo de uso do atributo CELLSPACING com valores variados

____________________________________________________________ Pgina - 48 -


59/122

Modelo de uso do atributo CELLSPACING

Tabelas

Atributo CELLSPACING

1

2 3

CELLPADDING O atributo CELLPADDING defne a distncia ente o contedo da clula em relao as suas

bordas, sendo aplicavl na tag . Os valores informados neste atributo so em pixels.

Fgura 8.9 Modelo de uso do atributo CELLPADDING com valores variados

____________________________________________________________ Pgina - 49 -


60/122

Modelo de uso do atributo CELLPADDING

Tabelas Atributo CELLPADDING

1 2 3

COLSPAN

O atributo COLSPAN aplicado nas tags e , pois define quantas colunas uma

clula pode abranger. Por padro, na maioria dos navegadores cada clula corresponde a uma coluna na

tabela.

Fgura 8.10 Modelo de uso do atributo COLSPAN

____________________________________________________________ Pgina - 50 -


61/122

Tabelas Atributo COLSPAN

1 2

3 4 5

ROWSPAN

O atributo ROWSPAN aplicado nas tags e , pois define quantas colunas uma clula pode abranger. Por padro, na maioria dos navegadores cada clula corresponde a uma coluna na tabela.

Fgura 8.11 Modelo de uso do atributo ROWSPAN

____________________________________________________________ Pgina - 51 -


62/122

Modelo de uso do atributo ROWSPAN

Tabelas Atributo ROWSPAN

1 2 3

4 5

8.4 CORES E IMAGEM NA TABELA

8.4.1 CORES NA TABELA

O atributo BGCOLOR utilizado para aplicar cor de fundo a clula ou a tabela. Este atributo pode ser inserido nas tags , e .

Fgura 8.12 Modelo de uso de cores de fundo

____________________________________________________________ Pgina - 52 -


63/122

Modelo de uso do atributo BGCOLOR

Tabelas CORES NA TABELA

1 2 3

4 4

5

8.4.2 IMAGEM DE FUNDO NAS TABELAS

Semelhante a inserir cores de fundo, possvel colocar imagens com fundo da tabela. Essa tcnica muito utilizada, e para isso usamos o atributo BACKGROUND. Este atributo pode ser utilizado nas

tags , , .

Fgura 8.13 Modelo de uso de imagens como fundo de tabela.

____________________________________________________________ Pgina - 53 -


64/122

Tabelas IMAGENS NA TABELA

Modelo de Imagem de Fundo

____________________________________________________________ Pgina - 54 -


65/122

REVISO CAPTULO 8 1) Quais as tags bsicas para estruturarmos uma tabela?

2) Escreva o cdigo de uma tabela simples.

3) O atributo BORDER utilizado para: _____________________________________________________

4) O atributo ALIGN utilizado para: _______________________________________________________

5) Para que serve o atributo COLSPAN e ROWSPAN?



66/122

9 . CORES A cor um poderoso aspecto da nossa experincia do mundo, quando bem aplicada, pode

melhorar e muito a mensagem que queremos transmitir. Quando falamos de cores precisamos entender o que representam para ns e para a outras pessoas.

O efeito das cores nos meios de comunicao tem sido estudado h vrios anos. Cada meio de comunicao (jornal, revista, televiso, web, etc) representa as cores de maneiras diferentes.

As cores se diferenciam em trs fatores: matiz, saturao (intensidade) e tonalidade (luminosidade).

9.1 MATIZ, SATURAO E TONALIDADE

MATIZ a cor pura dominante, como por exemplo: azul, amarelo, vermelho.

SATURAO OU INTENSIDADE o quanto a cor pura dominante (ou matiz) diluda pela luz branca e intensidade o quantidade de luz refletida (claro/escuro)

TONALIDADE a qualidade acromtica e representa o brilho relativo, do claro ao escuro, de

uma cor, em relao a uma escala de cinzas que varia do branco ao preto.

CONTRASTE: O contraste a base da distino da forma, tamanho, posio, volume e aparncia dos objetos. Considerando a cor, o contraste pode ser obtido entre a diferena no matiz e a tonalidade ou iluminao. O contraste entre as cores pode ser usado para alterar a sensao.

9.2 SISTEMA DE REPRESENTAO DAS CORES

O sistema RGB o padro de cores na web. um sistema cartesiano (x, y, z) onde cada cor

primria (Red, Green e Blue) representa um dos eixos do cubo RGB. o modelo usado em TV e monitores

O modelo CMYK formado pelas cores ciano (Cyan), magenta (Magenta), amarelo (Yellow) e preto (blacK).

utilizado em dispositivos de impresso.

Algumas cores podem ser exibidas nos monitores de vdeo, mas no podem ser impressas, e

algumas cores pode ser impressas, mas no exibidas em monitores. Alm disso, existem cores que

enxergamos que no podem ser presentadas pelo monitores e impressoras.

____________________________________________________________ Pgina - 55 -


67/122

9.3 PSICOLOGIA DAS CORES

As cores tm propriedades diferentes de acordo com a cultura onde so consideradas. No caso da WEB, preciso ter cuidados especiais para transmitir a mesma mensagem visual a pessoas de diferentes culturas.

Cada cor possui uma caracterstica e uma influncia sobre todos ns. As nossas emoes estimuladas pelas cores podem ter uma relao negativa ou positiva dependendo da experincia que associamos a elas. As cores podem tanto acalmar quando estimular.

Alm disso, os diversos fatores culturais fixam atitudes psicolgicas que orientam inconscientemente as inclinaes individuais.

Veja alguns exemplos:

BRANCO: Indica limpeza, pureza. CINZA: Indica tristeza e neutralidade. ROSA: Indica graa e ternura. PRETO: Indica sujeira e coisas negativas. VERMELHO: Indica calor e energia. AZUL: Indica honradez, f e pureza.

Esses significados ficam enraizados na cultura de um povo e passam a integrar, nas sensaes visuais para definir estados emocionais ou situaes vividas pelo indivduo.

Em relao criao publicitria, os psiclogos procuram dar um sentido mais prtico quanto

ao uso das cores.

De acordo com estudos, existe uma estreita relao entre a idade e a preferncia que uma pessoa manifesta por determinada cor. Este estudo muito utilizado para elaborar projetos comunicao visual baseados no pblico alvo.

Os adultos idosos preferem cores mais escuras, como o azul e o verde, enquanto as crianas

preferem cores vibrantes como o vermelho e o amarelo.

Veja a tabela abaixo:

____________________________________________________________ Pgina - 56 -

CORES IDADES SENS A O

VERMELHO 1 a 10 anos Efervecncia e espontaneidade

LARANJA 10 a 20 anos Imaginao, excitao e aventura

AMARELO 20 a 30 anos Fora, potncia, arrogncia

VERDE 30 a 40 anos Diminuio do fogo juvenil

AZUL 40 a 50 anos Pensamento Inteligncia

LILS 50 a 60 anos Juzo, misticismo e lei

ROXO 60 anos Saber, Benevolncia e experincia


68/122

O ser humano reage a cores para gostar ou no gostar de determinada coisa, para reagir ou no reagir, para negar ou afirmar.

Todos os psiclogos esto em comum acordo ao atribuirem significados a cores que so

bsicas a

qualquer

indivduo

que

viva

dentro

de

nossa

sociedade

e

cultura.

Vejamos alguns significados, segundo um estudo realizado pelo Prof. Modesto Farina:

BRANCO: Sugere pureza, simplicidade, otimismo, Com a ausncia de caracteres, cria a impresso de vzio e infinito. Evoca ao refrescante e desinfetante, principalmente quando usado junto com o azul claro.

PRETO: Smbolo do infortnio e da morte, exibe caracterstica impenetrvel. a cor mais desprovida de sentimento, porm se for brilhante, confere nobreza, distino e elegncia.

CINZA: Exprime um estado de alma duvidoso e neutro e evoca medo, desnimo e monotonia, medida em que for mais escuro. O tom mais escuro a cor do sujo e desprezvel, como no tom grafite. Brilhante como a prata, clssico e nobre.

VERMELHO: Significa fora, alegria de viver, virilidade, dinamismo. s vezes pode ser irritante

ou exaltante. Impe-se como dignidade e severidade, benevolncia e charme. Cor quente por definio, sem as caractersticas do Amarelo que espalha e invade todas as cores ao seu redor. uma cor conclusiva,

porque se basta. Quanto mais escuro, mais profundo, grave e circunspecto, como o Vermelho Cardinalcio.

Se mais claro, exprime temperamento jovial e fantasioso.

VERDE: a cor mais fria, calma e tranquila, no exprimindo qualquer sentimento de alegria,

tristeza ou paixo. Imvel, satisfeita, tambm a cor da esperana. Se tiver um pitadinha de Amarelo, torna-se ensolarada, ativa, indiferente. J se ouver a predominncia do Azul, torna-se carregada, severa, repleta de pensamentos.

AZUL: Cor que exprime calma profunda, interior, infinita e diferente do verde. solene, grave e

espiritual, as anlises racionais so ignoradas. Nos tons mais claros e brilhantes, provoca sensao de frescor e higiene, sendo a preferida pelas mulheres. O tom turquesa exprime grande fora, fogo interior e frio, como os lagos iluminados pelo sol de vero. As tonalidades mais escuras agradam mais aos homens.

AMARELO: Luminosa, vibrante, vistosa e gostosa, principalmente em tons claros e limpos. cor superficial, no transmitindo profundidade. cor muito ativa, que estimula a criatividade, mas se sujar

com o marrom ou verde, apresenta aspecto doentio, repugnante. Aquecida com ligeiros tons de Vermelho, evoca um misto de alegria e satisfao.

LARANJA: a cor mais acolhedora, quente, ntima como fogo ardente, mais irradiante e expansiva que o vermelho. Ao mesmo tempo, transmite refrescncia se associada com o fruto.

VIOLETA: Misteriosa e triste, melanclica e mediativa, demonstra um pensamento profundo e

religioso. Em tons mais claros e luminosos, como o lils, torna-se mgica e mstica.

ROSA: Tmido, romntico, intimista. O Rosa a cor feminina por excelncia, com pouca vitalidade exprimindo afeio e afetuosidade. Sugere intimidade.

MARROM: a cor mais realista, segundo estudiosos, a cor que representa justia. No

____________________________________________________________ Pgina - 57 -


69/122

sendo brutal ou vulgar, evoca a vida s e cotidiana. Neutra por excelncia, a medida que vai escurecendo adquire caractersticas do Preto.

PASTEL: A caracterstica de abrandamento e afabilidade das cores quais se origina. Os tons Pastel so a representao das coisas que se encontram dentro da solido e do foro ntimo.

As cores devem ser planejadas para interface considerando o contexto em que sero utilizadas, muitas vezes tendo que respeitar a cor do logotipo da empresa.

DICAS

Evitar fundos escuros. Fundo preto no recomendado (principalmente em portais de comunicao), pois h poucas cores que contrastam e causa cansao visual. No

caso de impresso em Preto e Branco, a cor a ser usada para o texto ou imagem pode ser convertida para o escuro.

Reduzir o nmero de cores. Muitos designers se esquecem que a maioria dos monitores apenas conseguem representar, milhares de cores, outros 256 ou 16 cores, alm dos monitores em Preto e Branco que equipam sistemas comerciais. Para sistemas comerciais, usar apenas 16 cores, pois ao serem convertidas para o

monocromtico, h padres de cinza suficientes.

Usar sempre textos com letras pretas. A letra preta, sobre um fundo claro, tem melhor legibilidade. Podemos dispor de opes para troca da cor de plano de fundo,

porm esse recurso pode no ser bem aceito pela maioria.

No tornar a tela muito brilhante ou escura, use cores brilhantes em reas pequenas

e cores suaves em reas maiores.

Tenham em mente que as cores mal utilizadas so piores do que no fazer uso delas.

____________________________________________________________ Pgina - 58 -


70/122

10 .TIPOLOGIA

A TIPOLOGIA significa o estudo dos tipos, ou seja, o conjunto de caracteres tipogrficos que so conhecidos como fontes. Elas admitem algumas variaes tais como itlico, negrito, sublinhado, etc.

Hoje em dia, existem diversos tipos disponveis de fontes. A maior parte dos tipos de fontes, podem ser classificados em 6 categorias, que so estas:

ESTILO ANTIGO

Moderno

Serifa Grossa

Sem Serifa

Manuscrito

DECORATIVO

Iremos conhecer as similaridades entre os tipos, tornando-o mais conciente quando aos detalhes e aplicaes das letras.

10.1 ESTILO ANTIGO

Os tipos criados no estilo antigo baseiam-se na escrita mo dos escribas que trabalhavam com uma pena na mo. Os estilo antigos sempre tm serifa e as serifas das letras em caixa-baixa (minsculas) sempre tm um ngulo. Por isso todos os traos curvos das letras passam de grossos para

____________________________________________________________ Pgina - 59 -


71/122

finos, o que chamamos tecnicamente de transio grosso-fino. Um tipo Estilo Antigo tem uma nfase diagonal.

Algumas fontes: Times New Roman

Garamond

Goudy

Palatino

Os estilo antigo o melhor grupo de tipos para utilizar em grandes extenses de texto corrido.

Caso esteja trabalhando com um texto muito longo e deseja que as pessoas o leiam, coloque-o no estilo

antigo.

10.2 ESTILO MODERNO

Os tipos modernos tm serifas, mas estas so horizontais e no inclinadas e so muito mais finas. Semelhante a uma ponte de ao, a estrutura forte com uma transio grosso-fino radical, ou contraste, nos traos. No h evidncias da inclinao, a nfase perfeitamente vertical. Os tipos modernos tm uma esttica fria e elegante.

Os tipos modernos tm uma aparncia forte, principalmente quando so muito grandes. Por suas fortes transies grosso-fino, a maioria dos tipos modernos no so uma boa opo de grandes extenses de texto corrido.

____________________________________________________________ Pgina - 60 -


72/122

Algumas fontes:

Bodoni

Times Bold

Fenice

Ultra

Walbaum

10.3 SERIFA GROSSA

As letras com serifa grossa tm pouca transio ou nenhuma transio grosso-fino. s vezes,

essa categoria de tipos chamada de Clarendon, porque a fonte Clarendon a sntese desse estilo. Muitos

dos tipos com serifa grossa, com contraste grosso-fino suavem tm um grau muito elevado de legibilidade,

o que siginifica que podem ser facilmente utilizados em textos extensos. Porm esse tipos criam uma pgina mais escura do que aqueles em estilo antigo, pois seus traos so mais grossos e o peso de cada

letra relativamente igual. Tipos com serifa grossa costumam ser utilizados em livros infantis, poi sua esttica clara e direta.

Algumas fontes: Clarendon New Century Scoolbook

____________________________________________________________ Pgina - 61 -


73/122

10.4 SEM SERIFA

Os tipos sem serifa so quase sempre de peso igual, o que significa qie virtualmente no h

transio grosso-fino vsivel nos traos; as letras tm sempre a mesma espessura.

Algumas fontes:

Arial

Century Gothic

Folio

Tahoma

10.5 MANUSCRITO

A categoria de tipos manuscritos inclui todos os tipos que parecem ter sido escritos a mo, com uma caneta tinteiro, com um pncel ou, s vezes, com um lpis ou caneta profissional. Os tipos manuscritos devem sem utilizados pouco a pouco, ou seja, os tipos mais elaborados nunca deveriam ser colocados na

forma de blocos de textos e nunca com todas as letras em caixa-alta (maiculas).

Algumas fontes: Linoscript

Zapf Chancery

Carpe Diem

10.6 DECORATIVO

____________________________________________________________ Pgina - 62 -


74/122

Os tipos decorativos so fceis de identificar. Eles so timos, engraados, diferentes, fceis de usar, costumam ser baratos e sempre existe uma fonte para cada capricho que voc queira expressar.

lgico que por serem diferenciados, seu uso dever ser limitado.

Algumas fontes:

Addled Extravaganza

Fajita

Scarlett

Party

____________________________________________________________ Pgina - 63 -


75/122

11 . FERRAMENTAS DO PHOTOSHOP Vamos iniciar o uso do PHOTOSHOP para tratamento e edio de imagens para a

Web. Fotos e imagens so fundamentais para o desenvolvimento de um layout, mas uma imagem

ou foto tem que estar num certo padro para ser inserida dentro de uma pgina da Internet. Com

este programa de edio, vamos fazer com que os arquivos tenham uma tima resoluo e um tamanho de arquivo pequeno, gerando um rpido acesso a esta imagem.

11.1. INICIANDO O PHOTOSHOP

Para iniciarmos uma edio de imagens no PHOTOSHOP, vamos conhecer primeiro as ferramentas que ele oferece no menu, conhecer seus nomes e funes para depois aplicarmos

em exemplos cada uma das ferramentas:

Figura 1.0 Barra de ferramentas do PHOTOSHOP

______________________________________________________________ Pgina - 64 -


76/122

Estas ferramentas respondem seleo e movimento de reas selecionadas. Ao

pressionarmos o ponteiro do mouse sobre a ferramenta que apresenta um tringulo no canto inferior direito, sero exibidas outras ferramentas que se relacionam com funes e se encontram agrupadas na ferramenta inicial.

Adobe Online Acesse o site da Adobe e verifique as novidades de download e informaes sobre os programas da linha Adobe e informaes do PHOTOSHOP.

Marca de Seleo Com a ferramenta de marca, selecionamos um traado geomtrico para seleo e corte. Nesta ferramenta temos opes ocultas, ao clicarmos sobre o boto e segurarmos

por alguns instantes, aparecer algumas opes dos formatos de seleo.

Mover Para estar movendo uma imagem dentro da rea de trabalho.

Lao Faz traados livres para seleo e corte de imagens, esta ferramenta possui ainda o Lao

Poligonal e o Lao Magntico.

Varinha Mgica Esta ferramenta trabalha muito com as cores e pixels. Ela seleciona reas com

cores iguais ou pixels mais prximos. Ideal para grandes reas que devem ser excludas.

Corte Demarcado Tambm conhecido como CROP, ela seleciona a rea e o que for externo a

esta seleo ser excludo. Usando a tecla CRTL pressionada ter o controle da dimenso.

Fatia Conhecido tambm como slice, ele dividi a imagem em partes e cria um arquivo HTML, assim a imagem carregada em partes e com mais velocidade.

Nesta rea, encontram-se as ferramentas relativas pintura aerogrfica e com pincel; borracha e lpis (trao); carimbo e manchar; (aproximar reas); clarear reas; degrad e desfoque.

Pincel Uso livre para pintura e efeitos em imagem.

Carimbo Ferramenta utilizada para clonar partes de uma imagem.

Pincel do Histrico Retira as partes que foram pintadas com o pincel.

Borracha Como o prprio nome diz, ela apaga trechos que no devem aparecer na imagem.

______________________________________________________________ Pgina - 65 -


77/122

Degrad Efeitos de cores nas imagens.

Desfoque Ferramenta que tira o foco, ou seja, a nitidez da imagem.

Subexposio Proporciona uma claridade na imagem para destaque. Dentro desta ferramenta h opes inversas que utilizam forma de escurecer e destacar.

Nesta rea, temos ferramentas como (texto, trao e graduao) que so relativas

incluso, movimentao e aumento da imagem.

Seleo de componente de demarcador Uma das ferramentas mais utilizadas, para selecionar

as imagens que esto sendo utilizadas, recorta imagens selecionadas e arrasta imagens de uma janela a outra.

Texto Para criao de textos nas imagens.

Caneta Criao de linhas livres.

Retngulo Para criar formas geomtricas.

Observaes Ferramenta de texto que possibilita escrever os procedimentos que esto sendo utilizados nesta edio, como um lembrete.

Conta-gotas Com esta ferramenta selecionamos um ponto com a cor que queremos que seja o

primeiro plano de nossa rea de trabalho.

Mo Ferramenta para navegar pela imagem.

Zoom Para ampliar ou diminuir a imagem.

EXERCCIOS PARA REVISO

1. Quais as diferenas entre as 3 reas da barra de ferramentas?

2. Para editar basicamente uma imagem, precisamos, selecionar, cortar reas no utilizadas, trabalhar as cores e texto. Explique uma ferramenta de cada rea que possa seguir esta linha de edio.

______________________________________________________________ Pgina - 66 -


78/122

12 . VISUALIZANDO AS IMAGENS Ao abrir uma imagem ou um arquivo para criao, o PHOTOSHOP abre uma janela

onde ser sua rea de trabalho. Abra um arquivo de imagem e vamos ajustar para uma visualizao onde possamos trabalhar a edio da mesma com mais facilidade. Com a ferramenta

MO, clique duas vezes em cima da imagem para ajustar a imagem na janela; aqui a ferramenta LUPA (zoom) utilizada para aproximar a imagem num setor onde seja necessrio estar editando

com mais preciso. Podemos ter vrios arquivos do PHOTOSHOP abertos ao mesmo tempo, cada

um sendo mostrado em uma janela, mas somente uma delas pode ser a janela ativa. Existem vrios modos de exibio das imagens no monitor, a primeira o modo padro, onde cada janela

aparece no tamanho normal. Os outros dois modos trabalham com a tela cheia. Para alternar entre

estes modos, d um clique em um dos botes na parte inferior da barra de ferramentas ou pressione a tecla F para alterar entre estes modos.

Figura 2.0 Janela da rea de trabalho do PHOTOSHOP

Observe que no ttulo da janela, temos o nome do arquivo que est sendo editado e a

porcentagem de zoom que est sendo usada; entre parnteses temos o sistema de cor utilizada,

______________________________________________________________ Pgina - 67 -


79/122

RGB red green blue. Temos a janela menor que oferece a opo navegador, para situaes

quando a imagem est com alto zoom, podemos navegar pela imagem menor com o quadro vermelho livremente pela imagem, acessando mais rpido e fcil o setor desejado, caso esta opo no esteja aberta, use a opo MOSTRAR NAVEGADOR na opo JANELA dentro do MENU.

Figura 2.1 Visualizador de imagens no Menu de ferramentas do PHOTOSHOP

Mas apesar de observar a imagem em tela cheia voc se sentir incomodado com as janelas auxiliares do PHOTOSHOP, bastar pressionar a tecla TAB e ficar visvel na tela somente

a imagem que est sendo editada, ao pressionar TAB novamente para elas voltarem a aparecer.

NOTA: A ferramenta MO pode ser uma boa opo, alm de poder arrastar a imagem dentro da rea de trabalho e do navegador, ela pode ser utilizada como zoom, pressionando as teclas CRTL

e ALT, voc ter mais ou menos zoom conforme a sua necessidade.


1. Quais as informaes que aparecem no ttulo das janelas com imagens?

2. Quais as vantagens de utilizar a opo NAVEGADOR?

______________________________________________________________ Pgina - 68 -


80/122

13 . SELECIONANDO E MOVENDO IMAGENS As selees so reas da imagem que voc marcou para fazer alguma alterao, e

so limitadas e especificadas por uma linha pontilhada em torno da regio desejada. Podemos criar selees utilizando a ferramenta Marca de Seleo, Lao, Varinha Mgica, Corte Demarcado

e Lao, como veremos mais adiante.

13.1. MARCA DE SELEO

Com as ferramentas de MARCA, selecionamos uma das opes e qual formato utilizaremos para selecionar a parte da imagem que desejamos trabalhar. Podemos variar conforme a necessidade, com a ferramenta MARCA, ela oferece opes geomtricas como retangular e elptica. Selecionada a opo, mantenha pressionado o boto esquerdo do mouse arrastando sobre a rea da figura que queremos selecionar. Podemos editar esta linha pontilhada

que fica sobre a rea selecionada, mantendo os botes SHIFT ou ALT, aumentando ou diminuindo a rea de seleo.

Figura 3.1 reas de seleo feitas com a ferramenta MARCA

Ao posicionar o ponteiro dentro da rea de seleo, podemos arrastar a seleo sem modificar a imagem; se pressionar a tecla CRTL o ponteiro ser modificado para o formato de uma

tesoura, indicando que esta rea ser recortada da imagem. Selecionando a ferramenta MOVER,

______________________________________________________________ Pgina - 69 -


81/122

ela ter a mesma funo, recortando a imagem selecionada e arrastando para outra rea da imagem.

Podemos ainda selecionar esta rea de recorte e arrastar para dentro de outra imagem

ou ainda para uma nona janela; ao recortar esta imagem, voc pode copiar esta rea selecionada

ou ainda retir-la da imagem, aplicando um CTRL+C para copiar ou CTRL+X para recortar esta rea, e dentro de uma nova janela ou dentro de outro arquivo, faa um CRTL+V para inserir a rea

recortada.

13.2. LAO

Vimos que a ferramenta MARCA faz selees com formatos geomtricos, ideais para selecionar grandes reas dentro de uma imagem, mas s vezes necessrio termo contornos mais preciso, ou reas mais precisas para seleo. A ferramenta LAO possibilita traados livres dentro de uma imagem, oferecendo trs opes de laos: LAO, LAO POLIGONAL e LAO MAGNTICO. Com o LAO fazemos selees totalmente livres, arrastando o ponteiro pela rea solicitada; o LAO POLIGONAL utilizamos linhas retas para a seleo e o LAO MAGNTICO

utilizada para selecionar reas com extremidades complexas com fundos de muita luz, ela atua como um im selecionando a rea com maior intensidade de luz do ponto que foi solicitado a

escolha da seleo.

Selecionando a rea, voc precisar fechar esta seleo, para concluir a seleo de uma extremidade a outra, ao final aparecer ao lado do ponteiro um pequeno crculo indicando o ponto inicial da seleo, ento se pode excluir esta rea selecionada pressionando a tecla DELETE, caso no tenha sido esta rea a desejada, pressione CTRL+Z para retornar a rea e clique com o ponteiro dentro da rea selecionada para desfazer esta seleo.

______________________________________________________________ Pgina - 70 -


82/122

Figura 3.2 Figura selecionada com a Ferramenta LAO

13.3. VARINHA MGICA

Esta ferramenta trabalha com as cores da imagem, selecionando reas com o mesmo

tom de cor prximas ao ponto que for pressionado o ponteiro; muito utilizada para selecionar grandes reas com o mesmo tom de cor, selecionando assim todo o epao que for necessrio estar editando. Para uma maior preciso da rea que deseja selecionar, o item TOLERNCIA pode ser modificada aumentando ou diminuindo o valor entre 0 e 255, isto aproxima ou afasta as cores mais parecidas com a que foi selecionada. As opes SUAVIZAO DE SERRILHADO e ADJACENTE oferece opes para trabalhar com toda a imagem ou apenas com as cores da rea

selecionada.

NOTA: Muitas vezes selecionamos mais de uma rea com estas ferramentas de seleo e recortamos as mesmas ou ainda exclumos a rea. Mas pode ter ocorrido um equvoco ou ainda um erro de seleo; se pressionar as teclas CTRL+Z ser cancelado o ltimo comando utilizado, mas se o comando anterior ao ltimo, pressione CTRL+ALT+Z para retornar comandos anteriores a este. uma forma de no perdemos a edio correta da imagem e assim partir do ponto que no houve o erro. Ainda h outra opo que a JANELA HISTRICO, para ativ-la selecione no MENU-JANELA na seqncia MOSTRAR HISTRICO. Nesta janela podemos observar as aes que foram feitas, podendo voltar ao ponto que nos interessa.

______________________________________________________________ Pgina - 71 -


83/122

Figura 3.3 rea selecionada com a ferramenta VARINHA MGICA

Figura 3.3.1 rea selecionada e a opo da JANELA HISTRICO

______________________________________________________________ Pgina - 72 -


84/122

13.4. CORTE DEMARCADO

Esta ferramenta exclui toda rea externa a que for selecionada, para grandes imagens

ideal para utilizar apenas a rea que interessante. Arraste o mouse sobre a rea selecionada,

observe que teremos a opo de dimensionar a rea, mantenha o boto SHIFT pressionado para que assim possamos manter a proporo constante da imagem.

Figura 3.4 rea demarcada para edio com a ferramenta CORTE DEMARCADO


1. Aps crias uma rea de seleo, como podemos alterar o formato desta rea?

2. Qual a diferena entre as opes da ferramenta LAO?

3. Como atua a ferramenta VARINHA MGICA para a seleo de uma imagem?

______________________________________________________________ Pgina - 73 -


85/122

14 . MODIFICANDO AS SELEES Aprendemos at aqui como modificar e selecionar o que nos interessa dentro de uma

imagem, podendo aumentar, diminuir, selecionar apenas uma rea, cortar em partes para assim utilizar a imagem da maneira que gostaramos. Mas temos muito mais para fazer com estas imagens para que elas sejam alteradas e assim possamos fazer outros efeitos com cores, distores, bordas, filtros, textos e muito mais.

Uma seleo pode ser preenchida por uma cor, uma imagem vinda de outro arquivo ou

uma textura. Para criar um novo arquivo com o fundo colorido, vamos ao menu ARQUIVO-NOVO e

temos as seguintes opes: Nome do arquivo; Preset Size (padroniza o tamanho da rea de trabalho que possa ser utilizada); Largura e Altura da rea de trabalho, selecionando a medida utilizada como pixels, cm entre outras; Resoluo da imagem que ser criada, normalmente uma imagem para internet utiliza a resoluo de 72dpi e para imagens impressas a medida de 300dpi; Modo de cor utilizado como RGB, BITMAP, CMYK para cada tipo de utilizao da imagem seja para Internet, jornais, revistas, etc; e CONTENTS Aqui selecionamos as opes de rea branca, rea colorida ou rea transparente.

Figura 4.0 Tela de incio para criao de um novo arquivo

______________________________________________________________ Pgina - 74 -


86/122

No menu de ferramentas, ainda temos a opo de selecionar o primeiro e segundo plano da imagem, podendo ser alterada diretamente nos quadros e ainda retornando a opo inicial com preto e branco clicando no quadrinho menor em preto e branco.

Figura 4.0.1 Menu de ferramentas opo de cores de plano

14.1. FILTROS

Para fazer alguns efeitos na sua imagem, deixar elas com estilos de pinturas, vidros, 3D, cores fortes, clssicas entre outras, o PHOTOSHOP oferece FILTROS para a edio de sua imagem. No menu a opo FILTROS oferece diversas opes, selecione vrias delas para fazer testes, modifique a quantidade e direo de luz utilizada, o tamanho do efeito, o relevo entre outras

configuraes que estar disponvel quando o efeito for selecionado. Temos tambm a opo TRAAR (stroke) que cria um contorno em volta da sua imagem, acessando atravs do menu EDITAR-TRAAR (stroke), podendo sofrer alterao no tamanho da linha de contorno, a localizao desta linha na imagem a cor e alguns modos que o PHOTOSHOP oferece.

NOTA: No abuse tanto dos efeitos dos FILTROS, ele pode deixar sua imagem muito festiva e no passar a mensagem necessria daquela imagem. Tente trabalhar os efeitos com qualidade, com objetividade e assim manter o aspecto original da imagem. Ao inserir um filtro, lembre-se que

sua imagem ter um aumento tambm no tamanho do arquivo quando for salv-lo, tente trabalhar

com as ferramentas para conseguir o efeito desejado, isto pode manter a qualidade da imagem e no carregar o seu arquivo final.

______________________________________________________________ Pgina - 75 -


87/122


1. Para que utilizamos os FILTROS nas imagens? 2. Devemos sempre estar utilizando FILTROS nas imagens? De um exemplo de tipo de

filtro e que tipo de imagem deve ser utilizada.

______________________________________________________________ Pgina - 76 -


88/122

15 . TRANSFORMANDO AS SELEES Nosso trabalho ainda pode sofrer mais modificaes conforme o necessrio, escalar,

rotacionar, inclinar, distorcer, inverter e alterar as perspectiva, so opes que podemos fazer com

os objetos selecionados. Muitas destas opes se encontram no menu SELECIONAR, mas para ativar as opes devemos selecionar antes a rea que ser feita transformao, como uma inverso, um objeto com o fundo branco pode ser selecionado com a inverso, basta clicar com a

varinha no fundo do objeto, depois no menu SELECIONAR a opo INVERTER, seu objeto estar

selecionado e pronto para ser modificado, podendo ainda alterar a sua ROTAO clicando na opo TRANSFORMAO LIVRE no menu editar ou simplesmente um comando CTRL+T, assim

altera o tamanho e a inclinao da imagem, lembrando que para aumentar ou diminuir o tamanho

da imagem, utiliza a tecla SHIFT pressionada para no perder a proporo da imagem.

Figura 5.0 Seleo da imagem com Inverso e Transformao Livre

NOTA: Sempre que fizer algum tipo de alterao na imagem, o PHOTOSHOP oferece uma opo

de concluir o efeito, no concluir o efeito ou cancelar o efeito, caso voc ainda no tenha certeza que efeito ou alterao esta fazendo, clique em cancelar, se a sua opo alterar o tamanho ou algum estilo do efeito, clique em no concluir o efeito.

______________________________________________________________ Pgina - 77 -


89/122

15.1. PINCEL

O PINCEL oferece diversas formas para pintar livremente uma imagem, completar uma imagem j pronta ou ainda fazer efeitos com pincel estilizado. Temos como exemplos o PINCEL BORRIFO 39 que funciona como um spray dentro da imagem, o PINCEL 45 que espalha

a tinta como se fosse uma aquarela na imagem, alguns pincis com formas de bolhas, estrelas, riscos que vo espalhando dentro da imagem. Observe na figura os detalhes em amarelo, todos criados com efeitos do pincel.

Figura 5.1 Imagem com efeitos da ferramenta PINCEL

15.2. FERRAMENTA DEGRAD

Normalmente utilizamos DEGRAD para o fundo das imagens. Temos algumas opes de como deve estar o DEGRAD, de onde ele deve partir dentro da imagem, que cor deve

variar entre outras opes, como LINEAR, RADIAL, ANGULAR, REFLETIDO e etc.

______________________________________________________________ Pgina - 78 -


90/122

Para inserir este efeito nas imagens, selecione a imagem e arraste a ferramenta DEGRADE a partir do ponto que queira que comece e termine o efeito. Voc pode ainda alterar as cores do DEGRADE e mudar

curso web designer

Documents