mpdf Abra Fordes.pdf

Associao Brasileira de Formao e Desenvolvimento Social - ABRAFORDESwww.CursosAbrafordes.com.br

DICA: Tecle Ctrl+s para salvar este PDF no seu computador.

Curso WebdesignerLio 01: Introduo - HTMLIntroduo - HTML

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 (formatoWord) para HTML.

A linguagem HTML utiliza marcaes especficas e distintas para dizer ao navegador (InternetExplorer, Firefox, Mozilla, e outros) como exibir o documento.

Os comandos HTML so chamados de TAGS, compreende as marcas padres que so utilizadas parafazer indicaes a um browser.

Assim como em outras linguagens, os comandos tm uma sintaxe prpria e seguemalgumas regras:

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

A maioria das etiquetas tem a sua correspondente de fechamento:

< etiqueta > ............................................. < /etiqueta >l

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

< H1 > Cabecalho < / H1 >l

Onde:

A tag < H1 > indica o incio na instruo;lO texto Cabealho indica o texto que ser formatado;lE a tag < /H1 > indica o final da instruo.l

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

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

< font > Cursos Abrafordes do Brasil < / font >

H excesses para a utilizao dos pares de etiquetas. Por exemplo, a que indica um final de umpargrafo: < p > no necessita de uma correspondente

para terminar a formatao do bloco de texto. A etiqueta que indica quebra de linha < br > tambmno precisa de etiqueta correspondente, entre outras.

Criando Documentos HTML

Todo documento HTML precisa conter certas tags padronizadas, no mnimo < HEAD >, < / HEAD >,< BODY > e < / BODY >, pois elas constituem as duas partes bsicas de um documento HTML queso: o HEAD (cabealho) e o BODY (corpo do documento).

< HTML >

< HEAD >

< TITLE >Curso de WebDesign< / TITLE >

< / HEAD >

< BODY >

< H1 >Este o primeiro nvel de cabealho.< / H1 >< p >

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

Este o segundo paragrfo

< / BODY >

< / HTML >

A tag < HEAD > contm, entre outras coisas, o < TITLE > (ttulo), e a tag < BODY > armazena todoo contedo do documento, normalmente composto de pargrafos, listas, tabelas, etc.

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

Abra o bloco de notas, e digite o cdigo acima e salve-o como primeiro.html. Em seguida, abraarquivo primeiro.html no navegador (Internet Explorer, ou outro).

Explicao:

A primeira TAG que encontramos no documento < HTML >. Ela o elemento raiz de umdocumento HTML, pois dentro dela est todo o contedo da pgina. Esta tag diz ao navegador parainiciar um novo documento HTML, onde o contedo que dever ser exibido esta entre as tags e < HTML >.

O texto contido ente as TAG < HEAD > e < HEAD > define o cabealho do documento. Estasinformaes so importantes pois indicam ao navegador a forma que a pgina deve ser apresentadagraficamente.

A tag < TITLE > define o ttulo da pgina. Observe a figura 1.1 o topo do navegador, est informadoCurso de WebDesign.

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

2.1 ELEMENTOS BSICOS

2.1.1 TTULOSl

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 indicarclaramente o contedo do documento.

As tag utilizadas para ttulos so: < TITLE > e < / TITLE >.

< html >

< title >Este o ttulo< / title >

< body >

< h2 >E este o cabealho de nvel 2< / h2 >

Aqui entra o texto do documento ...

< / body >

< / html >

2.1.2 CABEALHOl

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

Em geral, os cabealhos so exibidos em letras maiores e em negrito, e o HTML adiciona uma linhaem branca antes e depois do cabealhos. O primeiro cabealho de uma pgina deve ser marcadacomo < H1 >.

COMANDO:

< Hy > Texto do Cabealho < / Hy >

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

COMANDO:

< H1 > Cabealho nvel 1 < / H1 >






2.1.3 PARGRAFO

A tag < p > utilizada para definir o nicio de um pargrafo, criando uma linha em branco entrecada pargrafo. O tag < p > tambm responsvel pelo alinhamento dos pargrafos.

O alinhamento pode ser:

LEFT : Pargrafo alinhado a esquerda.lCENTER: Pargrafo alinhado ao centro.lRIGHT: Pargrado alinhado a direita.lJUSTIFY : Pargrafo justificado.l

< html >

< head >

< title >Alinhamento de pargrafos< / title >

< / head >

< body >

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

< p align = " center " >Este pargrafo utiliza o alinhamento centralizado

< p align = " righ t" >Este pargrado utiliza o alinhamento direita.

< / body >

< / html >

2.1.4 QUEBRA DE LINHA

A tag < br > usada para terminar uma linha sem iniciar um novo pargrafo. Esta tag < br >, ou"line break", provoca uma mudana de linha sem acrescentar espao extra entre as linhas.

Veja a diferena entre o uso da tag < p > e da tag < br >:

MODELO I

< html >

< body >

< h1 >Utilizando a tag p < / h1 >

Vamos separar esta linha com a marcao de paragrfo.< p >

Para verificar a diferena.

< / body >

< / html >

MODELO II

< html >

< body >

< h1 >Utilizando a tag br< / h1 >

Diferena quando separamos duas linhas utilizando< br >

a marcao de quebra de linha< br >

Diferena quando separamos duas linhas utilizando< br >

a marcao de quebra de linha < br >

Verificou a diferena?

< / body >

< / html >

2.1.5 COMENTRIOS

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

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

COMANDO:

< !-- Comentrio da pgina -- >

2.1.6 LISTA DE ELEMENTOS BSICOS

2.1.7 DICAS

Quando criamos pginas em HTML devemos ter sempre ateno ao fato delas poderem ser1.apresentadas de forma diferente em cada navegadores (browsers) ou em conmputadoresdiferentes. O ASPECTO GRFICO PODE DIFERIR ENTRE COMPUTADORES OU ENTRENAVEGADORES ! Isso ocorre no s pela diferena entre os sistemas, mas tambm pelo fato deque os usurios possuem monitores diferentes e podem redimensionar a janela do navegador parao tamanho que prefirirem.As diferenas nos tamanhos das janelas dos navegadores fazem com que o nmero de linhas varie2.muito. Por esse motivo no seremos capazes de controlar nem o nmero de linhas nem os locaisem que acontecem as mudanas de linhas.Sempre que quiser inserir linhas em branco use3..J observou alguma vez uma pgina da internet, e se perguntou: "Quais as instrues que foram4.utilizadas?". Se estiver utilizando o Internet Explorer e quiser descobrir as instrues, v at omenu Exibir e escolha a opo Cdigo Fonte, ou clique com o boto direito do mouse e selecionea opo Exibir Cdigo Fonte.No desanime se o aspecto do cdigo fonte lhe aparecer assustador. Se esse for o caso, pode ter5.certeza que a pgina que est visualizando foi feita por um programa especfico. Ao longo docurso, ser possvel verificar que o cdigo HTML bem escrito a mo muito fcil de ler, masmuitas pessoas complicam o cdigo para confundir.

Lio 02: Formatao de TextosFormatao de Textos

3.1 DEFININDO FONTES

A tag < font > permite que voc insira em sua pgina um texto com fontes, tamanhos, cores e tiposdiferentes.

COMANDO:

< FONT SIZE="n" FACE="nome" COLOR="cor"> Texto < / font >

Onde:

- SIZE: indica o tamanho da fonte que varia de 1 a 7, sendo 3 o valor padro da maioria dosnavegadores.

- 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.

Caso a fonte utilizada na pgina no esteja disponvel para o usurio que visit-la, a fonte sersubstituida 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 dousurio, 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,itlico ou sublinhado.

COMANDO:

< html >

< head >

< title >Exemplo< /title >

< / head >

< body >

< b >Isto texto em negrito< / b > < br >

< strong >Isto texto forte< / strong > < br >

< big >Isto texto maior< / big > < br >

< em >Isto texto enfatizado< / em > < br >

< i >Isto texto itlico< / i > < br >

< small >Isto texto mais pequeno< / small > < br >

Este texto contm uma parte alinhada mais < sub >abaixo< / sub > < br >

Este texto contm uma parte alinhada mais < sup >acima< / sup >

< / body >

< / html >

3.3 FORMATANDO BLOCO DE TEXTOS

3.3.1 TAG DIV

A tag < div > permite alinhar horizontalmente qualquer elemento em sua pgina. O alinhamentopode ser: left, center ou right.

Onde a posio pode ser:

LEFT: Alinhamento a esquerda;lCENTER: Alinhamento centralizado;lRIGHT: Alinhamento a direita.l

O padro de alinhamento da tag < div > a esquerda.

COMANDO:

< div align = "posicao" >Elementos a serem alinhados< / div >

< html >

< head >

< title >ALINHAMENTO DE ELEMENTOS COM A TAG DIV< / title >

< / head >

< body >

< div align="center" >

< h1 >Usando a TAG DIV < / h1 >< / div >

< div align="right" >

< p > Usando a tag DIV possvel alinhar o texto sem problemas

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

tela.< br >

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

< / div >< / body > < / html >

Controle de Cores e Grficos de Fundo

Uma cor ou imagem de fundo bem escolhidos podem melhorar o aspecto da pgina, mas uma mescolha 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 criaruma pgina com fundo e textos personalizados.

As cores so compostas por cdigo RGB (red, green, blue). Cada cdigo define a intensidade dovermelho, do verde e do azul.

4.1 CORES 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 comofundo de uma pgina, sendo que a imagem ocupar toda a rea de fundo da tela.

COMANDO:

< body background="URL">Corpo da pgina< / body >

< html >

< head >

< title >Imagem de fundo - BACKGROUND< / title >

< / head >

< body background="fundo.jpg" >

< h1 align="center" >Imagem de fundoBackground< / h1 >

< p align="center" >Com esse atributo voc insere imagem de fundos nas pginas.

< / body >

< / html >

4.1.2 BGCOLOR

O atributo BGCOLOR o atributo que determina a cor de fundo da pgina, permitindo que se definauma cor de fundo padro para a pgina sem a necessidade de utilizar um arquivo de imagem.

COMANDO:

< body bgcolor=#FFFFCC >Corpo da pgina< / body >

< html >

< head >

< title >Cor de fundo - BGCOLOR< / title >

< / head >

< body bgcolor="#FFFFCC" >

< h1 align="center" >Cor de Fundo< br >BGCOLOR< / h1 >

< p align="center" >Com esse atributo voc controla a cor de fundo das pginas.

< / body >

< / html >

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.lPara tornar a visualizao das pginas mais rpidas, alguns usurios no utilizam imagens em suaslpginas, em vez disso utilizam o atributo BGCOLOR.

4.2 CORES 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 corde todo o texto do documento, execeto os links.

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

COMANDO:

< body text="#RRGGBB" >Corpo da Pgina < / body >

< html >

< head >

< title >Cor de texto - TEXT< / title >

< / head >

< body bgcolor="#FFFFFF" text="#333333" >

< h1 align="center" >CORES DE LETRAS DE TEXTO NORMAL< / h1 >

< p align="center" >Com esse atributo voc controla a cor do texto em uma pgina.

< / body >

< / html >

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 napgina.

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

COMANDO:

< body link="#RRGGBB" vlink="#RRGGBB" alink="#RRGGBB" >Corpo da pgina< / body >

< html >

< head >

< title >Cor de Links - LINK VLINK ALINK< / title >

< / head >

< body bgcolor="#FFFFE0" text="#FF6347" LINK"#0000CD" VLINK="#7FFFD4"

ALINK="#ADFF2F" >

< h1 align="center" >EXEMPLO DE CORES< / h1 >

< p align="center" >O fundo da pgina est com uma cor especial:< BR >

< B >Lightyellow - RGB : #FFFFE0< / b >< br >

< b >Alink = GreenYellow - RGB:"#ADFF2F"< / b >< br >

< b >Link = MediumBlue RGB:"#0000CD"< / b >< br >

< b >Vlink = Aquamarine- RGB: "#7FFFD4"< / b >

< / body >

< / html >

Lio 03: Links, Listas, Imagens, Tabelas, CoresLINKS

O principal poder do HTML, est na capacidade de ligar partes de textos e imagens a outrosdocumentos. A interligao entre documentos feito utilizando a tag < a >, e no se restringeapenas a outras pginas. Os links podem apontar para qualquer recurso disponvel na WEB, podendoser uma pgina em HTML, uma imagem, um arquivo de som, um filme, etc.

5.1 NCORAS

As ncoras so links que utilizamos quando queremos buscar o contedo na mesma pgina ou emoutra pgina qualquer. So muito utilizadas em pginas que tm o contedo extenso, onde definimossees 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.

< a name=nomedaseo > < / a >

Onde:

< a (h um espao depois do a): a abertura da tag de link;lname:nome da seo: o nome dado a seo.lNo necessrio inserir nada entre as tags < a > e < / a >;l< / a >: utilizada para encerrar a tag.l

Com essa tag voc inserir uma imagem ou texto que indicar ao usurio que ao clicar neste tipo delink, este ir gui-lo at o local onde foi inserida a ncora.

< a href="#Nome da Seo" > Texto ou imagem < / a >

Onde:

< a = a abertura da tag de link;lhref="#Nome da Seo" = indica o nome da seo que ser acessada.lTexto ou imagem = indica o texto ou a imagem que receber o link.l< / a > = encerra a TAG.lO smbolo # indica ao navegador que o link se encontra na mesma pgina. indispensvel o usolde #.

5.2 INTERLIGANDO DOCUMENTOS EM OUTROS DIRETRIOS

Para interligar documentos em outros diretrios necessrio apenas indicar o caminho completo dalocalizao do mesmo.

Quando falamos de WEB, a forma de localizar arquivos diferente do Windows e DOS, vejamos porque:

A barra utilizada para separar diretrios a barra convencional ( / );lO diretrio atual ser sempre o ponto de partida para buscarmos arquivos em outro diretrio;lCaso o arquivo esteja localizado em outros nveis de diretrios, utilizamos ".. / ".l

Exemplo:

Ao clicar no link Pagina 1, na pgina index.html, queremos quer abra a pgina pagina1.htm,localizada dentro do diretorio pagina1.

< a href="pagina1/pagina1.html" >Pgina 1< / a >

Vamos imaginar a seguinte situao:

Estamos na pgina materias.html, localizada no diretrio materias, dentro do diretrio pagina1, e aoclicarmos no link Pgina Inicial queremos que nos posicione na index.html que esta fora dodiretrio pagina1. Como fazemos?

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

< html >

< head >

< title >LINK PARA OUTRO DIRETRIO< / title >

< / head >

< body >

< div align="center" >

< h1 align="center">Pgina Matrias< / h1 >

< p > Modelo de interligao de documentos localizados em nvel diferente.< br >

< a href="../../index.html" >Pgina Inicial < / a >

< / body >

< / html >

Observe a linha:

< a href=../../index.html >Pgina Inicial < / a >

Sendo que:

< a = a tag de abertura de link;lhref = especifica a localizao de qualquer tipo de recurso da internet, incluindo arquivos HTML.l"../../index.html" = indica que o arquivo index.html est 2 NVEIS ( ../../ ) inferior a pgina atual, oulseja, para exibir o arquivo index.html, teremos que retornar dois diretrios, sendo estes osdiretrios materias/pagina1. (Observe a figura 5.2)Pgina Inicial = o texto que ser utilizado como link, para que ao clicarmos este nos direcionelpara o local indicado no atributo href.O visitante da pgina apenas visualizar a palavra indicada entre as tags < a > < / a >, que nolcaso citado acima a palavra Pgina Inicial.

5.3 INTERLINGANDO URLs

Para criarmos um link para qualquer endereo localizado na internet, utilizamos uma URL. URL aabreviao de Uniform Resource Locator, que tem a funo de especificar a localizao de pginasou arquivos em servidores da WEB.

A URL composta de duas partes:

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

< a href: protocolo://servidor.arquivo > texto ou imagem < / a >

Onde:

O protocolo: o tipo de servidor que est sendo acessado;

Os mais utilizado so:

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

5.4 LINKS PARA E-MAILS

possvel colocar links para e-mail em pginas HTML. Ao clicar sobre o link do e-mail, abrir oprograma de envio de e-mail, podendo ser este o OULTLOOK EXPRESS ou outro que estiverconfigurado no computador.

< a href=mailto:endereo >Texto ou Imagem < / a >

Onde:

mailto = informa ao navegador que o link para e-mails;lendereo = dever ser informado o e-mail que ser direcionada as mensagens.l

LISTAS

As listas so utilizadas para organizar os contedos das pginas, servindo como resumos ou ndicesdos sites. As listas podem conter links para outras pginas, para arquivos ou outros sites.

Existem 4 tipos de listas, sendo estas:

LISTA NO NUMERADA;lLISTA NUMERADAlLISTA DE DEFINIESlLISTA INTERCALADAS.l

6.1 LISTAS NO NUMERADAS

As listas no numeradas inserem marcadores na frente de cada item.

Comando:

< UL TYPE=formato >

< LI > Item 1

< LI > Item 2

< LI > Item 3

< / UL >

Onde:

< UL >: 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);lsquare: formato de quadrado;lcircle: formato de crculo;l

< LI >: indica os tpicos da lista.

< / UL >: indica o fim da lista.

< html >

< head >

< title > Listas no numeradas < / title >

< / head >

< body >

< h1 > Listas no numeradas< / h1 >

< ul type="disc" >

< li > Type = "disc"

< li > Item 1

< li > Item 2

< li > Item 3

< / ul >

< ul type="square" >

< li > type="square"

< li > Item 1

< li > Item 2

< li > Item 3

< / ul >

< ul type="circle" >

< li > type = "circle"

< li > Item 1

< li > Item 2

< li > Item 3

< / ul >

< / body >

< / html >

6.2 LISTAS NUMERADAS

A lista numerada semelhante a lista no numerada, porm no lugar de marcadores inserido napgina uma lista numrica ou alfabtica, com valor pr-definido ou no.

Comando:

< OL TYPE=formato START=n >

< LI > Item 1

< LI > Item 2

< LI > Item 3

< / OL >

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;

< LI >: indica o tpico da lista.

< / OL > indica o fim da lista numerada.

< html >

< head >

< title > Listas numerada < / title >

< /head >

< body >

< h1 > Listas numeradas< / h1 >

< h3 >Lista numerada padro< / h3 >

< ol >

< li > Item 1

< li > Item 2

< li > Item 3

< / ol >

< h3 >Lista numerada padro com START="10"< / h3 >

< ol start="10" >

< li > Item 1

< li > Item 2

< li > Item 3

< / ol >

< h3 >Lista alfabtica com letras maisculas< / h3 >

< ol type="A">

< li > Item 1

< li > Item 2

< li > Item 3

< / ol >

< / body >

< / html >

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:

< DL >

< DT > Item 1

< DD > Descrio do Item 1

< DT > Item 2

< DD > Descrio do Item 2

< / DL >

Onde:

< DL >: indica o nicio da lista descritiva;

< DT >: indica o item da lista;

< DD >: indica a descrio do item da lista ;

< / DL >: indica o fim da lista.

NOTA:

Para cada tag < DT > existe uma tag < DD >lNo necessrio encerrar as tags < DT > e < DD >l

< html >

< head >

< title> Listas de Definies < / title >

< / head >

< body >

< h1 > Listas de Definies< / h1 >

< DL >

< DT >< b >Listas no numeradas< / b >

< DD > As listas no numeradas ou pontuadas inserem marcadores na frente de

cada item.

< / DL >

< DL >

< DT >< b >Lista numeradas< / b >

< DD >As listas numeradas inserem nmeros ou letras na frente de cada item.

< /DL >

< DL >

< DT >< b >Lista de Definies< / b >

< DD >As listas de definies so diferentes das demais listas pois possuem

dois elementos: o item e a descrio do item.

< / DL >

< / body >

< / html >

6.4 LISTAS INTERCALADAS

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

< html >

< head >

< title> Listas Intercaladas < / title >

< / head >

< body >

< h1 > Lista Intercaladas< / h1 >

< UL >

< LI >Estados da Regio Sul

< UL >

< LI >Paran

< LI >Santa Catarina

< / UL >

< LI >Estados da regio Sudeste

< OL >

< LI >So Paulo

< LI >Rio de Janeiro

< LI >Minas Gerais

< / OL >

< / UL >

< / body >

< / html >

IMAGENS

Hoje em dia, a grande maioria dos navegadores exibem imagens dispostas em sites, porm asimagens possuem formatos especficos, pois no qualquer tipo de arquivo de imagem que deve serinserido 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 comtamanhos menores. Este formato muito utilizado para desenhos ou grficos, gerando arquivos coma extenso .GIF.

J o formato JPEG (Joint Photografic Engineering Group) suporte 16 milhes de cores e pode reduziro tamanho de uma imagem em at 10 vezes. Este formato muito utilizado para fotos, gerandoarquivos com a extenso .JPEG ou JPG.

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

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

7.1 INSERINDO IMAGENS NA PGINA

Comando:

< img src=diretorio/arquivo >

Onde:

< img >: tag que indica que h uma imagem na pgina.lSrc=diretorio/arquivo : atributo que indica o diretrio e a imagem que dever ser exibida.l

7.2 DIMENSIONANDO IMAGENS

Todas as imagens possuem um tamanho x e y, sendo x sua largura e y a sua altura. O tamanho dasimagens exibidas no navegador pode ser redimensionada.

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

Comando:

< img src=imagem/diretorio width=n height=n >

Onde:

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

NOTA:

- MUITO CUIDADO, ao redimensionar imagens, pois elas podem perder a sua definio, ficando como aspecto distorcido.

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:

< img src=diretorio/arquivo widht=n height=n ALIGN=posio >

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)lRIGHT : Alinha a imagem a direita.l

< html >

< head >

< title >Alinhando Imagens< / title >

< / head >

< body >

< h1 >Alinhamento de Imagens< / h1 >

< p >Alinhamento a Esquerda< br >

< img src="ft02.gif" width="150" height="150" align="left" >< br >

< br >< BR >< BR >< BR >< BR >< BR >

< p >Alinhamento a Direita

< img src="ft02.gif" width="150" height="150" align="right" >

< / body >

< / html >

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;lMIDDLE: Alinha o texto com o centro da imagem;lBOTTOM: Alinha o texto com o rodap da imagem.l

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 colocadosobre ela.

Comando:

< img src=diretorio/imagem width=n height=n align=posicao ALT=mensagem >

Onde:

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

< html >

< head >

< title >Redimensionado Imagens< / title >

< / head >

< body >

< h1 >Redimensionamento de Imagens < / h1 >

< img src="ft01.jpg" alt="A mensagem inserida aqui ser apresentada quando o cursor

do mouse for posicionado sobre a imagem" >

< / body >

< / html >

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 utilizaruma tabela dentro outra tabela.

No primeiro contato, possvel achar difcil a compreenso das tags utilizadas para estruturar astabelas, mas com o uso tornar mais fcil a utilizao e a interpretao de possveis falhas que umeditor de HTML qualquer possa gerar.

8.1 MARCAES BSICAS

< TABLE > < / TABLE >

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

< TR > < / TR >

Esta tag indica as linhas da tabela.

< TD > < / TD >

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

< TH > < / TH >

Esta tag define os ttulos de uma tabela, podendo ser utilizado em qualquer clula. A diferena entrea tag < TD >< / TD > e a tag < TH > < TH > que o contedo inserido entre as tags < TH >< / TH> ser exibido em negrito.

< CAPTION > < / CAPTION >

Esta tag insere a legenda da tabela. Deve ser inserida entre as tags < TABLE > < / TABLE >.

8.2 DESENVOLVENDO UMA TABELA SIMPLES

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

1. MODELO

< table border >

< tr >

< td >Primeira Clula 1 Linha< / td >

< td >Segunda Clula 1 Linha< / td >

< / tr >

< tr >

< td >Primeira Clula 2 Linha< / td >

< td >Segunda Clula 2 Linha< / td >

< / tr >

< / table >

Onde o comando acima ir ser exibido da seguinte forma:

2. MODELO

< table border >

< CAPTION >Modelo 2 de Tabelas Simples< / CAPTION >

< tr >

< td >Itens/ Ms< / td >

< th >Janeiro< / th >

< th >Fevereiro< / th >

< th >Maro< / th >

< / tr >

< tr >

< th >Usurios< / th >

< td >100< / td >

< td >200< / td >

< td >300< / td >

< / tr >

< tr >

< th >Linhas< / th >

< td >1< / td >

< td >2< / td >

< td >3< / td >

< / tr >

< / table >

8.3 ATRIBUTOS DE CONTROLE DE TABELAS

WIDTH

Este atributo utilizado para alterar a largura da tabela e das clulas em relao ao navegador. Osvalores inseridos podem ser em pixel ou em percentuais, ou seja, este atributo determina a rea datela que a tabela ir ocupar.

Comando:

1 MODELO WIDTH na tag < TABLE >

< table border widht=50 >

< tr >

< td >Segunda< / td >

< td >Tera < / td >

< td >Quarta< / td >

< / tr >

< tr >

< td >Quinta< / td >

< td >Sexta< / td >

< td >Sbado< / td >

< / tr >

< / table >

2 MODELO WIDTH na tag < TD >

< table border >

< tr >

< td width=50% >Segunda< / td >

< td >Tera < / td >

< td >Quarta< / td >

< / tr >

< tr >

< td >Quinta< / td >

< td >Sexta< / td >

< td >Sbado< / td >

< / tr >

< / table >

BORDER

O atributo border utilizado na tag < TABLE >, para definir se a tabela ser exibida com linhas decontorno. Caso o atributo no esteja informado, a tabela aparecer sem bordas.

Observe:

Modelo de uso utilizando o atributo BORDER

< html >

< head >

< title >Tabelas< / title >

< / head >

< body >

< h1 >Atributos BORDER< / h1 >< BR >

< table width="300" border="2" >

< tr >

< td >1< / td >

< td >2< / td >

< td >3< / td >

< / tr >

< / table >

< / body >

< / html >

Modelo de uso sem o atributo BORDER

< html >

< head >


< / head >

< body >

< h1 >Atributos BORDER < / h1 >< BR >

< table width="300" >

< tr >

< td >1< / td >

< td >2< / td >

< td >3< / td >

< / tr >

< / table >

< / body >

< / html >

ALIGN

O atributo ALIGN controla o alinhamento da tabela em relao a pgina. Pode se utilizado nas tags< TD > < TH >, onde este alinhar o texto contidos nas clulas a posio informada no ALIGN.

O atributo ALIGN aceita as seguintes posies:

LEFT : alinhamento a esquerda;lRIGHT: alinhamento a direita;lCENTER: alinhamento centralizado.l

Modelo de uso do atributo ALIGN na tag < TABLE >

< html >

< head >


< / head >

< body >

< h1 >Atributos ALIGN - tag TABLE< / h1 >< BR >

< table width="300" border="2" align="center" >

< tr >

< td >1< / td >

< td >2< / td >

< td >3< / td >

< / tr >

< / table >

< / body >

< / html >

Modelo de uso do atributo ALIGN na tag < TD > < TH >

< html >

< head >


< / head >

< body >

< h1 >Atributos ALIGN - tag TD e TH< / h1 >< BR >


< tr >

< td align="center" >1< / td >

< td align="left" >2< / td >

< td align="right" >3< / td >

< / tr >

< tr >

< tH align="center" >Alinhamento CENTER< / tH >

< tH align="left" >Alinhamento LEFT< / tH >

< tH align="right" >Alinhamento RIGHT< / tH >

< / tr >

< / table >

< / body >

< / html >

VALIGN

O atributo VALIGN controla o alinhamento do contedo das clulas em relao a borda superior e

inferior. Pode se utilizado nas tags < TD > < TH >.

O atributo VALIGN aceita as seguintes posies:

TOP : alinhamento ao topo;lMIDDLE: alinhamento ao centro;lBOTTOM: alinhamento ao rodap.l

Modelo de uso do atributo VALIGN

< html >

< head >


< / head >

< body >

< h1 >Atributos VALIGN< / h1 >< BR >


< tr >

< td align="center" valign="top" height="50" >1< / td >

< td align="center" valign="middle" >2< / td >

< td align="center" valign="bottom" >3< / td >

< / tr >

< tr >

< tH align="center" >Alinhamento TOP< / tH >

< tH align="center" >Alinhamento MIDDLE< / tH >

< tH align="center" >Alinhamento BOTTOM< / tH >

< / tr >

< / table >

< / body >

< / html >

CELLSPACING

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

Modelo de uso do atributo CELLSPACING

< html >

< head >


< / head >

< body >

< h1 >Atributo CELLSPACING< / h1 >< BR >

< table width="300" border="2" align="center" cellspacing="0" >

< tr >

< td align="center" height="30" >1< / td >



< / tr >

< / table >

< / body >

< / html >

CELLPADDING

O atributo CELLPADDING defne a distncia ente o contedo da clula em relao as suas bordas,sendo aplicavl na tag < TABLE >. Os valores informados neste atributo so em pixels.

Modelo de uso do atributo CELLPADDING

< html >

< head >


< / head >

< body >

< h1 >Atributo CELLPADDING< / h1 >< BR >

< table width="300" border="2" align="center" cellspacing="0" cellpadding="10" >

< tr >




< / tr >

< / table >

< / body >

< / html >

COLSPAN

O atributo COLSPAN aplicado nas tags < TH > e < TD >, pois define quantas colunas uma clulapode abranger. Por padro, na maioria dos navegadores cada clula corresponde a uma coluna natabela.

< html >

< head >


< / head >

< body >

< h1 >Atributo COLSPAN< / h1 >< BR >


< tr >

< td align="center" colspan="2" >1< / td >


< / tr >

< tr >




< / tr >

< / table >

< / body >

< / html >

ROWSPAN

O atributo ROWSPAN aplicado nas tags < TH > e < TD >, pois define quantas colunas uma clulapode abranger. Por padro, na maioria dos navegadores cada clula corresponde a uma coluna natabela.

Modelo de uso do atributo ROWSPAN

< html >

< head >


< / head >

< body >

< h1 >Atributo ROWSPAN< / h1 >< BR >


< tr >

< td align="center" rowspan="2" >1< / td >



< / tr >

< tr >



< / tr >

< / table >

< / body >

< / html >

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 podeser inserido nas tags < TABLE > , < TD > e < TH >.

Modelo de uso do atributo BGCOLOR

< html >

< head >


< / head >

< body >

< h1 >CORES NA TABELA< / h1 >< BR >


< tr >

< td align="center" bgcolor="blue" >1< / td >

< td align="center" bgcolor="green" >2< / td >

< td align="center" bgcolor="magenta" >3< / td >

< / tr >

< tr >

< td align="center" bgcolor="red" >4< / td >

< td align="center" bgcolor="white" >4< / td >

< td align="center" bgcolor="yellow" >5< / td >

< / tr >

< / table >

< / body >

< / html >

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 nastags < TABLE >, < TD >, < TH >.

< html >

< head >


< / head >

< body >

< h1 >IMAGENS NA TABELA< / h1 >< BR >

< table width="300" border="2" align="center" cellspacing="2" cellpadding="2"

background="ft02.gif" >

< tr >

< td align="right" valign="bottom" >< H2 >Modelo de Imagem de Fundo< H2 >< / TD >

< / tr >

< / table >

< / body >

< / html >

CORES

A cor um poderoso aspecto da nossa experincia do mundo, quando bem aplicada, pode melhorar emuito a mensagem que queremos transmitir. Quando falamos de cores precisamos entender o querepresentam para ns e para a outras pessoas.

O efeito das cores nos meios de comunicao tem sido estudado h vrios anos. Cada meio decomunicao (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 luzbranca e intensidade o quantidade de luz refletida (claro/escuro).

TONALIDADE a qualidade acromtica e representa o brilho relativo, do claro ao escuro, de umacor, 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 dosobjetos. Considerando a cor, o contraste pode ser obtido entre a diferena no matiz e a tonalidade ouiluminao. 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 algumascores pode ser impressas, mas no exibidas em monitores. Alm disso, existem cores queenxergamos que no podem ser presentadas pelo monitores e impressoras.

9.3 PSICOLOGIA DAS CORES

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

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

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

Veja alguns exemplos:

BRANCO: Indica limpeza, pureza.lCINZA: Indica tristeza e neutralidade.l

ROSA: Indica graa e ternura.lPRETO: Indica sujeira e coisas negativas.lVERMELHO: Indica calor e energia.lAZUL: Indica honradez, f e pureza.l

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

Em relao criao publicitria, os psiclogos procuram dar um sentido mais prtico quanto ao usodas cores.

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

Os adultos idosos preferem cores mais escuras, como o azul e o verde, enquanto as crianaspreferem cores vibrantes como o vermelho e o amarelo.

Veja a tabela abaixo:

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

Todos os psiclogos esto em comum acordo ao atribuirem significados a cores que so bsicas aqualquer 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 impressolde vzio e infinito. Evoca ao refrescante e desinfetante, principalmente quando usado junto como azul claro.PRETO: Smbolo do infortnio e da morte, exibe caracterstica impenetrvel. a cor maisldesprovida 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, lmedida em que for mais escuro. O tom mais escuro a cor do sujo e desprezvel, como no tomgrafite. Brilhante como a prata, clssico e nobre.VERMELHO: Significa fora, alegria de viver, virilidade, dinamismo. s vezes pode ser irritante oul

exaltante. Impe-se como dignidade e severidade, benevolncia e charme. Cor quente pordefinio, 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,ltristeza ou paixo. Imvel, satisfeita, tambm a cor da esperana. Se tiver um pitadinha deAmarelo, torna-se ensolarada, ativa, indiferente. J se ouver a predominncia do Azul, torna-secarregada, severa, repleta de pensamentos.AZUL: Cor que exprime calma profunda, interior, infinita e diferente do verde. solene, grave elespiritual, as anlises racionais so ignoradas. Nos tons mais claros e brilhantes, provoca sensaode frescor e higiene, sendo a preferida pelas mulheres. O tom turquesa exprime grande fora, fogointerior e frio, como os lagos iluminados pelo sol de vero. As tonalidades mais escuras agradammais aos homens.AMARELO: Luminosa, vibrante, vistosa e gostosa, principalmente em tons claros e limpos. corlsuperficial, no transmitindo profundidade. cor muito ativa, que estimula a criatividade, mas sesujar com o marrom ou verde, apresenta aspecto doentio, repugnante. Aquecida com ligeiros tonsde Vermelho, evoca um misto de alegria e satisfao.LARANJA: a cor mais acolhedora, quente, ntima como fogo ardente, mais irradiante e expansivalque o vermelho. Ao mesmo tempo, transmite refrescncia se associada com o fruto.VIOLETA: Misteriosa e triste, melanclica e mediativa, demonstra um pensamento profundo elreligioso. 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 vitalidadelexprimindo afeio e afetuosidade. Sugere intimidade.MARROM: a cor mais realista, segundo estudiosos, a cor que representa justia. No sendolbrutal ou vulgar, evoca a vida s e cotidiana. Neutra por excelncia, a medida que vai escurecendoadquire caractersticas do Preto.PASTEL: A caracterstica de abrandamento e afabilidade das cores quais se origina. Os tons Pastellso 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 decomunicao), pois h poucas cores que contrastam e causa cansao visual. No caso de impressoem 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 apenasconseguem representar, milhares de cores, outros 256 ou 16 cores, alm dos monitores em Preto eBranco que equipam sistemas comerciais. Para sistemas comerciais, usar apenas 16 cores, pois aoserem 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 serbem aceito pela maioria.

- No tornar a tela muito brilhante ou escura, use cores brilhantes em reas pequenas e coressuaves em reas maiores.

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

Lio 04: Ferramentas do PhotoshopFerramentas do Photoshop

Vamos iniciar o uso do PHOTOSHOP para tratamento e edio de imagens para a Web. Fotos eimagens so fundamentais para o desenvolvimento de um layout, mas uma imagem ou foto tem queestar num certo padro para ser inserida dentro de uma pgina da Internet. Com este programade edio, vamos fazer com que os arquivos tenham uma tima resoluo e um tamanho de arquivopequeno, gerando um rpido acesso a esta imagem.

11.1. INICIANDO O PHOTOSHOP

Para iniciarmos uma edio de imagens no PHOTOSHOP, vamos conhecer primeiro as ferramentasque ele oferece no menu, conhecer seus nomes e funes para depois aplicarmos em exemplos cadauma das ferramentas:

Figura 1.0 Barra de ferramentas do PHOTOSHOP

Estas ferramentas respondem seleo e movimento de reas selecionadas. Ao pressionarmos oponteiro 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 naferramenta inicial.

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

Marca de Seleo Com a ferramenta de marca, selecionamos um traado geomtrico paraseleo e corte. Nesta ferramenta temos opes ocultas, ao clicarmos sobre o boto e segurarmospor 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 LaoPoligonal e o Lao Magntico.

Varinha Mgica Esta ferramenta trabalha muito com as cores e pixels. Ela seleciona reas comcores 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 aesta 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 elpis (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.

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 hopes 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 selecionarasimagens que esto sendo utilizadas, recorta imagens selecionadas e arrasta imagens de uma janela aoutra.

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 sendoutilizados nesta edio, como um lembrete.

Conta-gotas Com esta ferramenta selecionamos um ponto com a cor que queremos que seja oprimeiro plano de nossa rea de trabalho.

Mo Ferramenta para navegar pela imagem.

Zoom Para ampliar ou diminuir a imagem.

Tipologia

A TIPOLOGIA significa o estudo dos tipos, ou seja, o conjunto de caracteres tipogrficos que soconhecidos 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, podemser classificados em 6 categorias, que so estas:

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

10.1 ESTILO ANTIGO

Os tipos criados no estilo antigo baseiam-se na escrita mo dos escribas que trabalhavam com umapena 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 finos, oque chamamos tecnicamente de transio grosso-fino. Um tipo Estilo Antigo tem uma nfasediagonal.

Algumas fontes:

Times New RomanlGaramondlGoudylPalatinol

Os estilo antigo o melhor grupo de tipos para utilizar em grandes extenses de texto corrido. Casoesteja trabalhando com um texto muito longo e deseja que as pessoas o leiam, coloque-o no estiloantigo.

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, oucontraste, nos traos. No h evidncias da inclinao, a nfase perfeitamente vertical. Os tiposmodernos tm uma esttica fria e elegante.

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

Algumas fontes:

BodonilTimes Boldl

FenicelWalbauml

10.3 SERIFA GROSSA

As letras com serifa grossa tm pouca transio ou nenhuma transio grosso-fino. s vezes, essacategoria 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 delegibilidade, o que siginifica que podem ser facilmente utilizados em textos extensos. Porm essetipos criam uma pgina mais escura do que aqueles em estilo antigo, pois seus traos so maisgrossos e o peso de cada letra relativamente igual. Tipos com serifa grossa costumam serutilizados em livros infantis, poi sua esttica clara e direta.

Algumas fontes:

ClarendonlNew Century Scoolbookl

10.4 SEM SERIFA

Os tipos sem serifa so quase sempre de peso igual, o que significa qie virtualmente no htransio grosso-fino vsivel nos traos; as letras tm sempre a mesma espessura.

Algumas fontes:

AriallCentury GothiclFoliolTahomal

10.5 MANUSCRITO

A categoria de tipos manuscritos inclui todos os tipos que parecem ter sido escritos a mo, com umacaneta tinteiro, com um pncel ou, s vezes, com um lpis ou caneta profissional. Os tiposmanuscritos devem sem utilizados pouco a pouco, ou seja, os tipos mais elaborados nunca deveriamser colocados na forma de blocos de textos e nunca com todas as letras em caixa-alta (maiculas).

Algumas fontes:

LinoscriptlZapf ChancerylCarpe Dieml

10.6 DECORATIVO

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:

AddledlExtravaganzalFajitalScarlettlPartyl

Lio 05: Visualizando as Imagens

Visualizando as Imagens

Ao abrir uma imagem ou um arquivo para criao, o PHOTOSHOP abre uma janela onde ser suarea de trabalho. Abra um arquivo de imagem e vamos ajustar para uma visualizao onde possamostrabalhar a edio da mesma com mais facilidade. Com a ferramenta MO, clique duas vezes emcima da imagem para ajustar a imagem na janela; aqui a ferramenta LUPA (zoom) utilizada paraaproximar a imagem num setor onde seja necessrio estar editando com mais preciso. Podemos tervrios 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 nomonitor, a primeira o modo padro, onde cada janela aparece no tamanho normal. Os outros doismodos trabalham com a tela cheia. Para alternar entre estes modos, d um clique em um dos botesna parte inferior da barra de ferramentas ou pressione a tecla F para alterar entre estes modos.

Observe que no ttulo da janela, temos o nome do arquivo que est sendo editado e a porcentagemde zoom que est sendo usada; entre parnteses temos o sistema de cor utilizada, RGB red green blue. Temos a janela menor que oferece a opo navegador, para situaes quando a imagem estcom alto zoom, podemos navegar pela imagem menor com o quadro vermelho livremente pelaimagem, acessando mais rpido e fcil o setor desejado, caso esta opo no esteja aberta, use aopo MOSTRAR NAVEGADOR na opo JANELA dentro do MENU.

Mas apesar de observar a imagem em tela cheia voc se sentir incomodado com as janelas auxiliaresdo PHOTOSHOP, bastar pressionar a tecla TAB e ficar visvel na tela somente a imagem que estsendo 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 reade 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.

Selecionando e Movendo Imagens

As selees so reas da imagem que voc marcou para fazer alguma alterao, e so limitadas eespecificadas por uma linha pontilhada em torno da regio desejada. Podemos criar seleesutilizando a ferramenta Marca de Seleo, Lao, Varinha Mgica, Corte Demarcado e Lao, comoveremos mais adiante.

13.1. MARCA DE SELEO

Com as ferramentas de MARCA, selecionamos uma das opes e qual formato utilizaremos paraselecionar 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 aopo, mantenha pressionado o boto esquerdo do mouse arrastando sobre a rea da figura quequeremos 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.

Ao posicionar o ponteiro dentro da rea de seleo, podemos arrastar a seleo sem modificar aimagem; 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, ela ter amesma 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 aindapara uma nona janela; ao recortar esta imagem, voc pode copiar esta rea selecionada ou aindaretir-la da imagem, aplicando um CTRL+C para copiar ou CTRL+X para recortar esta rea, edentro de uma nova janela ou dentro de outro arquivo, faa um CRTL+V para inserir a rearecortada.

13.2. LAO

Vimos que a ferramenta MARCA faz selees com formatos geomtricos, ideais para selecionargrandes reas dentro de uma imagem, mas s vezes necessrio termo contornos mais preciso, oureas mais precisas para seleo. A ferramenta LAO possibilita traados livres dentro de umaimagem, oferecendo trs opes de laos: LAO, LAO POLIGONAL e LAO MAGNTICO. Com oLAO fazemos selees totalmente livres, arrastando o ponteiro pela rea solicitada; o LAOPOLIGONAL utilizamos linhas retas para a seleo e o LAO MAGNTICO utilizada paraselecionar reas com extremidades complexas com fundos de muita luz, ela atua como um imselecionando 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 extremidadea outra, ao final aparecer ao lado do ponteiro um pequeno crculo indicando o ponto inicial daseleo, ento se pode excluir esta rea selecionada pressionando a tecla DELETE, caso no tenhasido esta rea a desejada, pressione CTRL+Z para retornar a rea e clique com o ponteiro dentro darea selecionada para desfazer esta seleo.

13.3. VARINHA MGICA

Esta ferramenta trabalha com as cores da imagem, selecionando reas com o mesmo tom de corprximas ao ponto que for pressionado o ponteiro; muito utilizada para selecionar grandes reascom o mesmo tom de cor, selecionando assim todo o epao que for necessrio estar editando. Parauma maior preciso da rea que deseja selecionar, o item TOLERNCIA pode ser modificadaaumentando ou diminuindo o valor entre 0 e 255, isto aproxima ou afasta as cores mais parecidascom a que foi selecionada. As opes SUAVIZAO DE SERRILHADO e ADJACENTE oferece opespara 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 recortamosas mesmas ou ainda exclumos a rea. Mas pode ter ocorrido um equvoco ou ainda um erro deseleo; se pressionar as teclas CTRL+Z ser cancelado o ltimo comando utilizado, mas se ocomando 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 oerro. Ainda h outra opo que a JANELA HISTRICO, para ativ-la selecione no MENU-JANELAna seqncia MOSTRAR HISTRICO. Nesta janela podemos observar as aes que foram feitas,podendo voltar ao ponto que nos interessa.

13.4. CORTE DEMARCADO

Esta ferramenta exclui toda rea externa a que for selecionada, para grandes imagens ideal parautilizar apenas a rea que interessante. Arraste o mouse sobre a rea selecionada, observe queteremos a opo de dimensionar a rea, mantenha o boto SHIFT pressionado para que assimpossamos manter a proporo constante da imagem.

Lio 06: Modificando e Transformando as SeleesModificando 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 aimagem da maneira que gostaramos. Mas temos muito mais para fazer com estas imagens para queelas 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 asseguintes opes: Nome do arquivo; Preset Size (padroniza o tamanho da rea de trabalho que possaser utilizada); Largura e Altura da rea de trabalho, selecionando a medida utilizada como pixels, cmentre outras; Resoluo da imagem que ser criada, normalmente uma imagem para internet utilizaa resoluo de 72dpi e para imagens impressas a medida de 300dpi; Modo de cor utilizado comoRGB, 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 reatransparente.

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 ebranco clicando no quadrinho menor em preto e branco.

14.1. FILTROS

Para fazer alguns efeitos na sua imagem, deixar elas com estilos de pinturas, vidros, 3D, coresfortes, clssicas entre outras, o PHOTOSHOP oferece FILTROS para a edio de sua imagem. Nomenu a opo FILTROS oferece diversas opes, selecione vrias delas para fazer testes, modifiquea quantidade e direo de luz utilizada, o tamanho do efeito, o relevo entre outras configuraes queestar disponvel quando o efeito for selecionado. Temos tambm a opo TRAAR (stroke) que criaum 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 acor e alguns modos que o PHOTOSHOP oferece.

NOTA: No abuse tanto dos efeitos dos FILTROS, ele pode deixar sua imagem muito festiva e nopassar a mensagem necessria daquela imagem. Tente trabalhar os efeitos com qualidade, comobjetividade e assim manter o aspecto original da imagem. Ao inserir um filtro, lembre-se que suaimagem ter um aumento tambm no tamanho do arquivo quando for salv-lo, tente trabalhar comas ferramentas para conseguir o efeito desejado, isto pode manter a qualidade da imagem e nocarregar o seu arquivo final.

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 objetosselecionados. Muitas destas opes se encontram no menu SELECIONAR, mas para ativar as opesdevemos 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 avarinha no fundo do objeto, depois no menu SELECIONAR a opo INVERTER, seu objeto estarselecionado e pronto para ser modificado, podendo ainda alterar a sua ROTAO clicando na opoTRANSFORMAO LIVRE no menu editar ou simplesmente um comando CTRL+T, assim altera otamanho e a inclinao da imagem, lembrando que para aumentar ou diminuir o tamanho daimagem, utiliza a tecla SHIFT pressionada para no perder a proporo da imagem.

NOTA: Sempre que fizer algum tipo de alterao na imagem, o PHOTOSHOP oferece uma opo deconcluir o efeito, no concluir o efeito ou cancelar o efeito, caso voc ainda no tenha certeza queefeito ou alterao esta fazendo, clique em cancelar, se a sua opo alterar o tamanho ou algumestilo do efeito, clique em no concluir o efeito.

15.1. PINCEL

O PINCEL oferece diversas formas para pintar livremente uma imagem, completar uma imagem jpronta ou ainda fazer efeitos com pincel estilizado. Temos como exemplos o PINCEL BORRIFO 39que funciona como um spray dentro da imagem, o PINCEL 45 que espalha a tinta como se fosse umaaquarela na imagem, alguns pincis com formas de bolhas, estrelas, riscos que vo espalhandodentro da imagem. Observe na figura os detalhes em amarelo, todos criados com efeitos do pincel.

15.2. FERRAMENTA DEGRAD

Normalmente utilizamos DEGRAD para o fundo das imagens. Temos algumas opes de como deveestar o DEGRAD, de onde ele deve partir dentro da imagem, que cor deve variar entre outrasopes, como LINEAR, RADIAL, ANGULAR, REFLETIDO e etc.

Para inserir este efeito nas imagens, selecione a imagem e arraste a ferramenta DEGRADE a partirdo ponto que queira que comece e termine o efeito. Voc pode ainda alterar as cores do DEGRADE emudar as posies de cada uma, suavizao entre outras opes clicando na rea que aparece odegrade na barra de menu da ferramenta DEGRADE.

DEGRADE LINEAR cria uma matiz do ponto de partida ao ponto final em uma linha reta.lDEGRADE RADIAL cria uma matiz do ponto de partida ao ponto final num padro circular.lDEGRADE ANGULAR cria uma matiz ao redor do ponto de partida.lDEGRADE REFLETIDO cria uma matiz usando gradientes lineares simtricos em qualquer ladoldo ponto de partida.DEGRADE DIAMANTE cria uma matiz do ponto de partida externo em um padro de diamante. Olponto final define um canto do diamante.

Observe no exemplo abaixo, que foi utilizado apenas a funo DEGRAD, para inserir o efeitoabaixo, selecionamos a rea das montanhas em preto com a VARINHA MGICA, em seguida fizemosa inverso da seleo e aplicamos o DEGRADE, com o efeito RADIAL com diversas tonalidades decores. Note que o efeito ocorreu apenas na rea fora das montanhas conforme a seleo.

15.3 CARIMBO

A ferramenta CARIMBO utilizada para copiar trechos de uma imagem e coloc-los em outra reada imagem, ele cria um clone dos pixels da imagem, como se fosse um carimbo de seleo.Utilizamos o carimbo para correo de imagens, como marcas ou manchas nas imagens, ampliaoda imagem, coberturas de trechos que no devem aparecer entre outras funes. Para utiliz-lo vocdeve clicar na rea que deseja clonar com a tecla ALT pressionado e preencher a rea desejada. OCARIMBO oferece opes de formatos do pincel, alm de tamanho de rea que o ponteiro deverestar copiando dentro das opes do pincel, voc seleciona o dimetro do ponteiro.

15.4 DESFOQUE, NITIDEZ E BORRAR

A ferramenta DESFOQUE faz com que a rea da figura selecionada, perca sua nitidez, deixando comum aspecto embaado. A ferramenta NITIDEZ faz o contrrio da ferramenta DESFOQUE. Elareconhece as cores dos pixels em volta da rea selecionada, e adiciona automaticamente contrastese cores nas matizes dos pixels, de modo que eles fiquem mais claros e exuberantes. Ela quaseconsegue reverter o trabalho da ferramenta DESFOQUE. Porm, de maneira muito leve, e quandosaturada ela destri os pixels da rea selecionada, transformando a figura. Deve ser utilizada comcautela. Com a ferramenta BORRAR fazemos um efeito de borro criado com o dedo sobre umapintura ainda fresca. Ela cria bordas mais suaves quando mistura e harmoniza os pixels por ondepassa.

NOTA: Muitas fotos podem estar com uma excelente qualidade, e mesmo assim podem receber aindaum bom banho de tratamento. No menu IMAGEM AJUSTES, temos funes para melhorar aqualidade da foto em diferentes aspectos. Podemos ajustar os Nveis da imagem automticos que namaioria dos casos j faz uma grande diferena, ou ainda trabalhar com os nveis personalizados queoferecem trabalhos com os tons de cores, a luminosidade da imagem, brilhos e contrates, balano decores entre outros. Com a opo SATURAR retiramos as cores da imagem mantendo o aspecto pretoe branco e assim podemos designar qualquer cor para esta imagem, esta funo muito utilizadapara mudar cor de olhos e cabelos, bastando apenas selecionar a rea que deseja fazer estamudana de cor e na opo BALAO DE CORES podemos colocar a cor que quisermos e assimalterar a imagem.

Outra opo para trabalhos com fotos que s vezes se torna necessrio para a montagem de umapgina de Internet e de inverter a imagem, muito conhecido como flipar a imagem. No menuIMAGEM temos a opo rotao da imagem, ela inverte a viso da imagem como se espelha-se amesma.

Lio 07: Criaes de Arquivos para WebFerramentas de Texto

Passamos agora a trabalhar com textos, que podem ser inseridos dentro das imagens que editamos,ou ainda se tornar uma imagem tambm, pois os textos tambm pode ser editados com efeitos eaparecendo muitas vezes mais que uma imagem. Ttulos de pginas, nomes, destaque para letras emuitas outras opes que iremos aprender neste captulo.

Uma camada de texto no pode ser criada para imagens em modos multicanal, bitmap, ou coresindexadas, porque estes modos no suportam camadas. Nestes modos de imagem o texto aparece noPlano de Fundo e no pode ser editado. Por isso quando voc quiser trabalhar com texto trabalhesempre com arquivos .psd.

Selecione a ferramenta TEXTO e clique no ponto onde deseja inserir o texto, observe que na barrade propriedades da ferramenta textos, tm as opes como escolher a fonte, o tamanho, oespaamento entre linhas, a cor do texto, etc. O texto pode ser digitado em um novo arquivo paracriao de uma nova imagem ou pode ser dentro de uma imagem j existente para definir a imagem.

Nesta imagem criamos apenas um texto definindo o que est na imagem, mas esta ferramentaoferece muitas outras opes para destacar mais o texto ou ainda criar novas opes com eles.

Observe nas imagens abaixo alguns exemplos de textos criados com esta ferramenta.

Criaes de Arquivos para Web

Quando utilizamos a Internet procura de informaes, queremos que estas cheguem o mais brevepossvel em nosso computador. Mas, com o aprimoramento da parte visual das pginas, s vezesficamos um bom tempo esperando uma figura ser carregada pelo navegador, mesmo com conexesde banda larga, e pior para conexes discadas, por isso importante que ao editar uma imagem parapublicao na WEB lembre-se que quanto maior o tamanho do arquivo da imagem, maior ser otempo de recebimento (dowload) desta pgina.

Na verso mais recente do PHOTOSHOP, foi includa a opo SALVAR PARA WEB do menuARQUIVO, esta opo facilita ao salvar uma imagem e assim trabalhar com sua qualidade e tamanhode arquivo que ser salvo. O PHOTOSHOP oferece vrias extenses para salvar seu arquivo,dependendo de como esta imagem ser publicada; opes como JPG, GIF, GIF ANIMADO, PNG,entre outras; resoluo normalmente utilizada para imagens na WEB se 72 DPI, o tamanho fsicoda imagem vai depender do espao que voc estar utilizando a mesma, lembrando que tente editara imagem no tamanho que ser utilizado, pois na opo SALVAR IMAGEM tambm podemos alterareste tamanho fsico, mas perdemos em resoluo de pixels.

Normalmente utilizamos para internet imagens com extenso GIF ou JPG que trazem uma boaresoluo e um tamanho de arquivo pequeno para carregar nas pginas. GIF ANIMADO umaanimao feita em camadas, ou seja, aquele tipo desenho que fazemos no papel passando pginasele d movimento conforme a velocidade, PNG uma extenso grande que possibilita alterar oarquivo, seus efeitos, proporo entre outras alteraes que ocorrerem na imagem. H opo TIFF de excelente resoluo com um tamanho de arquivo muito grande, ideal para impresso de revistase jornais.

Neste exemplo estamos salvando um arquivo tipo JPG, observe que temos algumas abas acima daimagem que possibilita visualizar a imagem original e a imagem editada. Na rea SETTINGSselecionamos a extenso na qual ser salvo o arquivo, abaixo o nvel de proporo e a qualidadedesta proporo de pixels; a caixa PROGRESSIVE pode manter a qualidade da imagem e diminuir otamanho do arquivo, ela mostra a imagem gradualmente enquanto est sendo carregada. Note que aimagem original tem o tamanho de 3,37M e a que ser salva para a Web possui 52,98K, mantendo omesmo tamanho fsico, alterando apenas a qualidade da imagem.

NOTA: Sempre que criar um arquivo com vrias imagens, efeitos e camadas, salve a opo PNG parapossveis alteraes que queira fazer futuramente. Este extenso de arquivo ir possibilitar que voctrabalhe todas as layers, camadas e efeitos que foram utilizados. Mas verifique se voc possuiespao para salvar arquivos com esta extenso, pois os arquivos PNG ficam com grande tamanho aosalvar e no devemos alterar a proporo e qualidade das imagens.

Lio 08: Seja um Bom Webdesigner!Vocabulrio Utilizado no Photoshop

Quando comeamos a trabalhar com o PHOTOSHOP, vamos descobrindo novas ferramentas e assimnovas palavras; pode-se dizer que o PHOTOSHOP tem seu prprio vocabulrio, quando se trata depassar informaes entre seus usurios, aqui est disponvel uma pequena lista de algumas palavrasutilizadas:

ANTIALIASING Numa imagem do tipo bitmap, a suavizao das bordas dos objetos para queno fiquem com aspectos serrilhados.

BATCH Recurso do PHOTOSHOP que permite a aplicao de uma ao a um conjunto de arquivossimultaneamente.

BLENDING Mistura de duas ou mais cores em um polgono ou pixel na construo de imagensdigitais, criando uma nova cor. No PHOTOSHOP, os efeitos de blending podem ser aplicadosindividualmente, em cada camada do arquivo.

CAMADAS Componentes que se comportam como folhas de papel transparente, permitindo oempilhamento de elementos numa imagem. As camadas podem ser editadas separadamente eocultadas.

CANAL ALFA Canal de informao contido em arquivos de imagem. Armazena dados sobreselees, mscaras e transparncias.

FATIAMENTO Recurso que permite dividir uma imagem em partes menores, para facilitar seucarregamento em pginas web, ou usar efeitos especiais. Ao fatiar uma imagem, o PHOTOSHOP criatambm o cdigo HTML necessrio para que ela seja exibida corretamente.

FILE BROWSER Ferramenta do PHOTOSHOP que permite visualizar miniaturas dos arquivosantes de abri-los. O FILE BROWSER tambm possibilita a realizao de operaes simples comorotao das imagens e incluso de metadados.

HISTORY Paleta do PHOTOSHOP que registra toas s aes feitas na imagem. Ela contm ohistograma, um grfico que mostra a quantidade de pixels de cada nvel de luminosidade daimagem. No PHOTOSHOP, o histograma permite ajustar caractersticas como contraste e colorao.

Seja um Bom Webdesigner!

Para poder criar um site como um bom Web Designer, preciso seguir algumas regras, no s paratornar a pginas bonita e agradvel, mas tambm para torn-la eficaz.

Algumas regras que consideramos essenciais:

SIMPLICIDADE A CHAVE Faa com que tudo seja muito simples, evite pginas com muitainformao, colocando apenas o essencial numa pgina, principalmente se for pgina principal deseu site.

EVITE TEXTOS LONGOS Textos longos devem ser resumidos ao mximo ou divididos em vriaspginas pequenas, sempre evitando textos longos.

USE IMAGENS Sempre que possvel, use imagens no lugar de textos, uma imagem expressamuito mais que palavras s vezes, principalmente na internet, onde o usurio no tem pacinciapara grandes leituras.

EVITE OS EXAGEROS Jamais utilize coisas do tipo msicas de fundo, bolas e figuras como Gifsanimadas e todo tipo de elemento semelhante. Nem pense em usar clipart em suas homepage, umGif Animado pode ser utilizado s vezes na criao de um logo ou bunner, mas sem muito exagero deefeitos.

FAA PGINAS LEVES Nenhuma pgina do site deve demorar a carregar, caso seu contedoseja grande e importante, devemos avisar o usurio que poder demorar a carregar.

CONHEA O USURIO Pense sempre que o usurio ter um equipamento inferior ao seu e quedeve acessar o mesmo contedo. Caso uma conexo mais lenta, uma visualizao de 800x600,diferentes navegadores, este o tipo de usurio que devemos atingir.

CORES E FONTES Utilizem sempre cores para destacar elementos, mas no de uma forma todestacada, mistura de cores e tudo mais, pois muitas cores podem fazer um belo carnaval do seusite. Cuidado ao utilizar fontes diferentes, nem sempre o usurio ter este tipo sofisticado de fonteque voc queira utilizar, normalmente um tipo de fonte ARIAL, TIMES e suas derivadas pode serideal. Se precisar usar algum tipo de fonte diferente, crie a mesma como uma figura que possacarregar no navegador do usurio sem sofrer alteraes.

EMOO X RAZO - D preferncia a usar o lado emocional em vez do racional quando criar umdesign, algo que agrade aos olhos e a navegao do usurio com simplicidade.

Lio 09: Criando um Novo SiteApresentando o Dreamweaver

O DREAMWEAVER MX um editor de HTML profissional para o desenvolvimento de pginas, sites eaplicativos para a INTERNET que j bastante utilizado no meio dos desenvolvedores pelafacilidade que sua interface apresenta. Ele oferece ferramentas suficientes para aqueles que gostamde trabalhar em modo texto, como por exemplo, as dicas de cdigo que so exibidas medida queso digitados os comandos. Tambm facilita a vida daqueles que no tem afinidade com cdigosHTML, ele possui uma interface grfica que possibilita a criao de pginas, sites e aplicativos sem anecessidade de digitao de uma nica linha de cdigo; possuindo painis, guias, menus e o inspetorde propriedades junto da rea de trabalho, facilita-se a busca de problemas e se agiliza as definiesem geral.

20.1 BARRA TTULO

A barra de ttulos contm o nome do programa que est sendo usado, no caso, Dreamweaver e onome do arquivo que est sendo editado.

20.2 BARRA DE MENUS

Nesta barra h vrios menus como Arquivo, Editar, Exibir, Inserir, Modificar, Texto, Comandos, Site,Janela, Ajuda.

20.3 BARRA INSERIR

Esta barra contm guias que possuem cones de atalhos para ferramentas bsicas, ou seja, as maisutilizadas na construo do site. Para exibi-la ou ocult-la clique no menu JANELA e selecione aopo INSERIR.

Nessa guia h algumas ferramentas bsicas, algumas esto cobertas, pois no iremos aprofundarmuito o contedo das mesmas, outras como (da esquerda para a direita):

HIPERLINK: inserir link;lE-MAIL: link para e-mail;lANCORA: link para um lugar especfico dentro do prprio documento ou outro qualquer;lINSERIR TABELA: inseri tabelas;lDESENHAR: desenha camadas;lIMAGEM: insere uma imagem;lIMAGEM ROLLOVER: insere uma imagem que substituda por outra ao passar do mouse;lMENU DE NAVEGAO: cria um menu com troca de imagens;lLINHA HORIZONTAL: insere linhas horizontais;lDATA: insere dataslCOMENTARIOS: insere comentriosl

20.4 BARRA DE FERRAMENTAS DOCUMENTO

Denominada documento essa barra possui ferramentas que exibem informaes do arquivo emedio, tais como, o ttulo, exibio de layout, layout e HTML e apenas o HTML. muito usada namanuteno dos sites, quando h necessidade de correes no cdigo HTML.

Para exibi-la ou ocult-la clique no menu EXIBIR e selecione BARRA DE FERRAMENTAS na opoDOCUMENTO (Document).

20.5 PAINIS

Os painis possuem informaes relacionadas a aes avanadas dentro de uma pgina. Dentre osprincipais existentes podemos destacar:

Design: onde buscaremos informaes sobre o arquivo css que ser vinculado ao arquivo;lArquivos: onde teremos a definio e a respectiva rvore de diretrios do site em evidncia.lEsses painis podem ser exibidos e ocultados atravs do menu janela na opo ocultar painis.l

20.6 GRUPOS DE PAINIS

Os painis e grupos de painis podem ser encaixados e combinados conforme a sua necessidade.Para expandir e reduzir o grupo de painis clique na seta de expanso. Para separar o grupo depainis arraste o grupo atravs da pina. Para agrupar um painel em outro grupo de painis cliqueno cone de opes que fica a direita da janela.

20.7 REA DE DESENVOLVIMENTO

A rea de desenvolvimento exibe tudo o que est sendo criado no site, assim tudo o que est na reade desenvolvimento est como ser exibido no browser, excetuando-se as linhas e marcas desmbolos visveis que identificam algum atributo, imagem ou texto.

20.8 VISUALIZAO DO DREAMWEAVER

possvel visualizar o projeto e o cdigo na mesma janela do documento ou cada umseparadamente. Ao criar documentos no DREAMWEAVER, o cdigo HTML geradoautomaticamente. O interessado no apenas a visualizao, mas a possibilidade de trabalhar eeditar o cdigo ou o projeto. As alteraes realizadas atualizam automaticamente o documento;somente o cdigo; cdigo e projeto; somente o projeto.

20.9 BARRA DE STATUS

Os elementos da barra de status so:

Seletor de tags: exibe as tags dos objetos selecionados na pgina;lTamanho da janela: permite definir o tamanho da janela configurando-a para caber nos diversosltamanhos de monitores e tambm as dimenses atuais da janela do documento (em pixels).Tamanho do documento e tempo estimado: mostra o tamanho do documento incluindo os arquivosldependentes. Mostrando o tempo estimado para carreg-lo no navegador. Por padro calculado otempo de download baseado em modem de 28.8 Kbs.

20.1.1 MENUS CONTEXTUAIS

Os menus contextuais so utilizados para facilitar o acesso aos comandos e propriedades maisutilizados para facilitar o acesso aos comandos e propriedades mais utilizados, relativos ao objeto oujanela que est sendo trabalhada. Os menus contextuais contm apenas a lista dos comandos quepertencem seleo atual. Abra o menu contextual, clicando o boto direito do mouse no objeto oujanela.

Criando um Novo Site

Para iniciar a construo de um site, vamos primeiramente criar uma pasta para colocarmos osarquivos que iremos utilizar neste site, podemos chamar a pasta de DWMX. Agora clique no menuSITE / NOVO SITE (new site), onde estaremos trabalhando com um assistente de criao para acriao deste site. Ao aparecer este assistente, verifique se a aba se encontra selecionada noBSICO e damos o primeiro passo que inserir o nome do site, seguido de AVANAR; na seqncia

ele pergunta se ir trabalhar com uma tecnologia de servidor, neste caso selecione a opo NO,pois iremos trabalhar com um site esttico.

Na opo seguinte, selecione o primeiro item (recomendvel), pois vamos editar os arquivoslocalmente e ento public-los no servidor remoto. Para o prximo passo, selecione a pasta queiremos salvar nossas pginas e arquivos, selecione a pasta SITE que foi criada no incio desta lio;na seqncia ele vai perguntar como se conectar ao servidor web, como aqui um

exemplo, selecione a opo NONE. PRONTO! Nesta ltima tela, temos um sumrio dasconfiguraes que foram feitas de uma forma resumida, agora podemos dar seqncia nasconfiguraes ou fazer alguma alterao se for necessrio.

INICIANDO UMA PGINA NO DREAMWEAVER

22.1 CRIANDO E SALVANDO UMA NOVA PGINA

Quando voc cria uma nova pgina, a primeira coisa que deve fazer salvar seu documento. Paracriar um novo documento, escolha ARQUIVO (FILE) / NOVO (NEW); clique na gui

Documents

mpdf Abra Fordes.pdf