Curso+de+Webdesign+ +CursosOnlineGratis

NDICE
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
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
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
1
Word) para HTML.

. 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 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 (<) e maior 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: <etiqueta> ............................................. </etiqueta> De um modo geral, as tags aparecem em pares, por exemplo: <H1> Cabecalho </H1> Onde:

A tag <H1> indica o incio na instruo; O texto Cabealho indica o texto que ser formatado; E a tag </H1> 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 -
<font> IDEPAC Instituto de Desenvolvimento Profissional Amigos Contabilistas, Empresrios, Profissionais Liberais e Informtica </font> H excesses para a utilizao dos pares de etiquetas. Por exemplo, a que indica um final de um pargrafo: <p> no necessita de uma correspondente </p> para terminar a formatao do bloco de texto. A etiqueta que indica quebra de linha <br> tambm no precisa de etiqueta correspondente, entre outras.
____________________________________________________________
Pgina - 2 -
. 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 que so: 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 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 -
1.1 Modelo de arquivo HTML Explicao: A primeira TAG que encontramos no documento <HTML>. 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 <HTML> e <\HTML>. O texto contido ente as TAG <HEAD> e <\HEAD> define o cabealho do documento. Estas informaes so importantes pois indicam ao navegador a forma que a pgina deve ser apresentada graficamente. A tag <TITLE> define o ttulo da pgina. Observe a figura 1.1 o topo do navegador, est informado Curso 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>.
____________________________________________________________
Pgina - 4 -
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: <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>
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 <H1>.
____________________________________________________________
Pgina - 5 -
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> <H2> Cabealho nvel 2 </H2> <H3> Cabealho nvel 3 </H3> <H4> Cabealho nvel 4 </H4> <H5> Cabealho nvel 5 </H5> <H6> Cabealho nvel 5 </H6>
Fgura 2.1 Modelo de Cabealhos
____________________________________________________________
Pgina - 6 -
2.1.3 PARGRAFO A tag <p> utilizada para definir o nicio de um pargrafo, criando uma linha em branco entre cada pargrafo. O tag <p> 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.
<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="right">Este pargrado utiliza o alinhamento direita. </body> </html>
Fgura 2.2 Modelo de alinhamento de pargrafos
____________________________________________________________
Pgina - 7 -
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>
Fgura 2.3 Modelos de quebra de linha
____________________________________________________________
Pgina - 8 -
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: 
2.1.6 LISTA DE ELEMENTOS BSICOS ELEMENTOS <html> <title> <body> <h1> ... <h6> DESCRIO 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). <p> <br> <!--- > Elemento de definio de pargrafos. Elemento que provoca quebra de linha no contudo da pgina. Elemento para insero de comentrios na pgina.
____________________________________________________________
Pgina - 9 -
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 <br>. 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 -
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 <p> e a tag <br>?
4) Quando utilizamos os comentrios?
______________________________________________________________________ Exerccios Reviso
3
tipos diferentes. COMANDO: Onde:
. FORMATAO DE TEXTOS
3.1DEFININDO FONTES A tag <font> permite que voc insira em sua pgina um texto com fontes, tamanhos, cores e
<FONT SIZE=n FACE=nome COLOR=cor> Texto </font>
SIZE: indica o tamanho da fonte que varia de 1 a 7, sendo 3 o valor padro da maioria dos FACE: indica o nome da fonte utilizada. As fontes padres da maioria dos navegadores so: COLOR : Define a cor da fonte do texto, em hexadecimal.
navegadores.
ARIAL, TIMES NEW ROMAN, GEORGIA, COURIER, VERDANA.
Fgura 3.1 Modelo de Formatao de Fontes
____________________________________________________________
Pgina - 11 -
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, itlico ou sublinhado. ELEMENTO <b> <big> <em> <i> <small> <strong> <sub> <sup> <blink> 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 DESCRIO
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> Este texto contm uma parte alinhada mais <sup>acima</sup> </body> </html>
<br>
____________________________________________________________
Pgina - 12 -
Fgura 2.4 Modelo de formatao de texto 3.3FORMATANDO BLOCO DE TEXTOS 3.3.1 TAG DIV
A tag <div> 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 <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>
____________________________________________________________
Pgina - 13 -
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 <DIV>?
4
4.1.1
. 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 BACKGROUND (IMAGEM DE FUNDO)
O atributo background deve ser aplicado tag <body>, 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: <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 fundo<br>Background</h1> <p align="center">Com esse atributo voc insere imagem de fundos nas pginas. </body> </html>
____________________________________________________________
Pgina - 14 -
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: <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>
____________________________________________________________
Pgina - 15 -
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 -
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 <BODY>, 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>
Fgura 4.3 Modelo do uso do atributo TEXT
____________________________________________________________
Pgina - 17 -
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: <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>
____________________________________________________________
Pgina - 18 -
Fgura 4.4 Modelo de cores de Links
____________________________________________________________
Pgina - 19 -
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: ____________________________________________________________________________
5
5.1NCORAS
. 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 <a>, 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.
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.
<a name=nomedaseo> </a>
Onde:

<a (h um espao depois do a): a abertura da tag de link; name:nome da seo: o nome dado a seo. No necessrio inserir nada entre as tags <a> e </a>; </a>: utilizada para encerrar a tag.
Com essa tag voc inserir uma imagem ou texto que indicar ao usurio que ao clicar neste tipo de link, este ir gui-lo at o local onde foi inserida a ncora.
<a href=#Nome da Seo> Texto ou imagem </a>
____________________________________________________________
Pgina - 20 -
Onde:

<a = a abertura da tag de link; href=#Nome da Seo = indica o nome da seo que ser acessada. Texto ou imagem = indica o texto ou a imagem que receber o link. </a> = encerra a TAG. O smbolo # indica ao navegador que o link se encontra na mesma pgina. indispensvel o uso de #.
5.2INTERLIGANDO DOCUMENTOS EM OUTROS DIRETRIOS Para interligar documentos em outros diretrios necessrio apenas completo da localizao do mesmo. Quando falamos de WEB, a forma de localizar arquivos diferente do Windows e DOS, vejamos por que: A barra utilizada para separar diretrios a barra convencional ( / ); O diretrio atual ser sempre o ponto de partida para buscarmos arquivos em outro diretrio; Caso o arquivo esteja localizado em outros nveis de diretrios, utilizamos .. / .

indicar o caminho
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>
Fgura 5.1 Modelo de links para documentos localizados em outros diretrios
____________________________________________________________
Pgina - 21 -
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: <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; href = especifica a localizao de qualquer tipo de recurso da internet, incluindo arquivos HTML. ../../index.html = indica que o arquivo index.html est 2 NVEIS ( ../../ ) inferior a pgina atual, ou seja, para exibir o arquivo index.html, teremos que retornar dois diretrios, sendo estes os diretrios materias/pagina1. (Observe a figura 5.2) Pgina Inicial = o texto que ser utilizado como link, para que ao clicarmos este nos direcione para o local indicado no atributo href.

____________________________________________________________
Pgina - 22 -
O visitante da pgina apenas visualizar a palavra indicada entre as tags <a> </a>, 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.
<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. 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. <a href=mailto:endereo>Texto ou Imagem </a>
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 -
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.
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: <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); square: formato de quadrado; circle: formato de crculo; <LI>: indica os tpicos da lista. </UL>: indica o fim da lista.
____________________________________________________________
Pgina - 24 -
<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>
Fgura 6.1 Modelo de lista no numerada
____________________________________________________________
Pgina - 25 -
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: <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>
____________________________________________________________
Pgina - 26 -
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: <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.
____________________________________________________________
Pgina - 27 -
NOTA:

Para cada tag <DT> existe uma tag <DD> No necessrio encerrar as tags <DT> e <DD>
<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> </DL> <DL> <DT><b>Lista numeradas</b> <DD>As listas numeradas inserem nmeros ou letras na frente de cada item.
<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>
____________________________________________________________
Pgina - 28 -
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. <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>
____________________________________________________________
Pgina - 29 -
Fgura 6.4 Modelo de Lista Intercalada
____________________________________________________________
Pgina - 30 -
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 <OL> 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?
7
extenso .GIF.
. 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 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 -
7.1 INSERINDO IMAGENS NA PGINA Comando:
<img src=diretorio/arquivo>
Onde:

<img>: 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 -
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: <img src=imagem/diretorio width=n height=n> 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 -
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) RIGHT : Alinha a imagem a direita.
<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>
____________________________________________________________
Pgina - 34 -
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 -
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:
<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
colocado sobre a imagem.
____________________________________________________________
Pgina - 36 -
Fgura 7.5 Modelo de utilizao do atributo ALT
<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>
____________________________________________________________
Pgina - 37 -
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:
8
para organizar dados, etc.
. Tabelas
As tabelas so muito utilizadas na internet hoje em dia, para estruturar o layout das pginas, 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 <TABLE> </TABLE> Esta tag indica o nicio e o fim da tabela. O atributo border insere uma borda para marcar a diviso das 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 que sero exibidos na tabela. <TH> </TH> Esta tag define os ttulos de uma tabela, podendo ser utilizado em qualquer clula. A diferena entre a 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>.
____________________________________________________________
Pgina - 38 -
8.2DESENVOLVENDO 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:
Fgura 8.1 Primeiro modelo de tabela
____________________________________________________________
Pgina - 39 -
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>
Fgura 8.2 Segundo exemplo de tabela
____________________________________________________________
Pgina - 40 -
8.3ATRIBUTOS DE CONTROLE DE TABELAS WIDTH Este atributo utilizado para alterar a largura da tabela e das clulas rea da tela 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> em relao ao
navegador. Os valores inseridos podem ser em pixel ou em percentuais, ou seja, este atributo determina a
____________________________________________________________
Pgina - 41 -
Fgura 8.3 Modelo de atributo width na tabela
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>
____________________________________________________________
Pgina - 42 -
Fgura 8.4 Modelo de atributo width na tag <TD> BORDER O atributo border utilizado na tag <TABLE>, 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 -
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> <title>Tabelas</title> </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; RIGHT: alinhamento a direita; CENTER: alinhamento centralizado.
____________________________________________________________
Pgina - 44 -
Fgura 8.6 Modelo de uso do atributo ALIGN Modelo de uso do atributo ALIGN na tag <TABLE> <html> <head> <title>Tabelas</title> </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>
____________________________________________________________
Pgina - 45 -
Modelo de uso do atributo ALIGN na tag <TD> <TH> <html> <head> <title>Tabelas</title> </head> <body> <h1>Atributos ALIGN - tag TD e TH</h1><BR> <table width="300" border="2" align="center"> <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; MIDDLE: alinhamento ao centro; BOTTOM: alinhamento ao rodap.
____________________________________________________________
Pgina - 46 -
Fgura 8.7 Modelo de uso do atributo VALIGN Modelo de uso do atributo VALIGN <html> <head> <title>Tabelas</title> </head> <body> <h1>Atributos VALIGN</h1><BR> <table width="300" border="2" align="center"> <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>
____________________________________________________________
Pgina - 47 -
CELLSPACING O atributo CELLSPACING define a distncia entre as clulas e linhas, sendo aplicavl a tag <TABLE>. Os valores informados neste atributo so em pixels.
Fgura 8.8 Modelo de uso do atributo CELLSPACING com valores variados
____________________________________________________________
Pgina - 48 -
Modelo de uso do atributo CELLSPACING <html> <head> <title>Tabelas</title> </head> <body> <h1>Atributo CELLSPACING</h1><BR> <table width="300" border="2" align="center" cellspacing="0"> <tr> <td align="center" height="30">1</td> <td align="center" >2</td> <td align="center" >3</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.
Fgura 8.9 Modelo de uso do atributo CELLPADDING com valores variados
____________________________________________________________
Pgina - 49 -
Modelo de uso do atributo CELLPADDING <html> <head> <title>Tabelas</title> </head> <body> <h1>Atributo CELLPADDING</h1><BR> <table width="300" border="2" align="center" cellspacing="0" cellpadding="10"> <tr> <td align="center" >1</td> <td align="center" >2</td> <td align="center" >3</td> </tr> </table> </body> </html> COLSPAN O atributo COLSPAN aplicado nas tags <TH> e <TD>, 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 -
<html> <head> <title>Tabelas</title> </head> <body> <h1>Atributo COLSPAN</h1><BR> <table width="300" border="2" align="center" cellspacing="2" cellpadding="2"> <tr> <td align="center" colspan="2">1</td> <td align="center">2</td> </tr> <tr> <td align="center" >3</td> <td align="center" >4</td> <td align="center" >5</td> </tr> </table> </body> </html> ROWSPAN O atributo ROWSPAN aplicado nas tags <TH> e <TD>, 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 -
Modelo de uso do atributo ROWSPAN <html> <head> <title>Tabelas</title> </head> <body> <h1>Atributo ROWSPAN</h1><BR> <table width="300" border="2" align="center" cellspacing="2" cellpadding="2"> <tr> <td align="center" rowspan="2">1</td> <td align="center">2</td> <td align="center">3</td> </tr> <tr> <td align="center" >4</td> <td align="center" >5</td> </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 pode ser inserido nas tags <TABLE> , <TD> e <TH>.
Fgura 8.12 Modelo de uso de cores de fundo
____________________________________________________________
Pgina - 52 -
Modelo de uso do atributo BGCOLOR <html> <head> <title>Tabelas</title> </head> <body> <h1>CORES NA TABELA</h1><BR> <table width="300" border="2" align="center" cellspacing="2" cellpadding="2"> <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 nas tags <TABLE>, <TD>, <TH>.
Fgura 8.13 Modelo de uso de imagens como fundo de tabela.
____________________________________________________________
Pgina - 53 -
<html> <head> <title>Tabelas</title> </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>
____________________________________________________________
Pgina - 54 -
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?
9
(luminosidade).
. 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
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 -
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:
CORES VERMELHO LARANJA AMARELO VERDE AZUL LILS ROXO
IDADES 1 a 10 anos 10 a 20 anos 20 a 30 anos 30 a 40 anos 40 a 50 anos 50 a 60 anos 60 anos
SENSAO Efervecncia e espontaneidade Imaginao, excitao e aventura Fora, potncia, arrogncia Diminuio do fogo juvenil Pensamento Inteligncia Juzo, misticismo e lei Saber, Benevolncia e experincia
____________________________________________________________
Pgina - 56 -
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 -
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 -
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:
10

.TIPOLOGIA
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 -
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 -
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 -
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 -
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 -
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 -
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 -
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 -
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 -
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. EXERCCIOS PARA REVISO 1. Quais as informaes que aparecem no ttulo das janelas com imagens? 2. Quais as vantagens de utilizar a opo NAVEGADOR?
______________________________________________________________ Pgina - 68 -
13
13.1. MARCA DE SELEO a rea de seleo.
. 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.
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
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 -
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 -
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 -
Figura 3.3 rea selecionada com a ferramenta VARINHA MGICA
Figura 3.3.1 rea selecionada e a opo da JANELA HISTRICO
______________________________________________________________ Pgina - 72 -
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 EXERCCIOS PARA REVISO 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 -
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 -
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 -
EXERCCIOS PARA REVISO 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 -
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 -
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 -
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 as posies de cada uma, suavizao entre outras opes clicando na rea que aparece o degrade na barra de menu da ferramenta DEGRADE. DEGRADE LINEAR cria uma matiz do ponto de partida ao ponto final em uma linha reta. DEGRADE RADIAL cria uma matiz do ponto de partida ao ponto final num padro circular. DEGRADE ANGULAR cria uma matiz ao redor do ponto de partida. DEGRADE REFLETIDO cria uma matiz usando gradientes lineares simtricos em qualquer lado do ponto de partida. DEGRADE DIAMANTE cria uma matiz do ponto de partida externo em um padro de diamante. O ponto final define um canto do diamante.
Figura 5.2 Barra de menu da ferramenta DEGRADE Observe no exemplo abaixo, que foi utilizado apenas a funo DEGRAD, para inserir o efeito abaixo, selecionamos a rea das montanhas em preto com a VARINHA MGICA, em seguida fizemos a inverso da seleo e aplicamos o DEGRADE, com o efeito RADIAL com diversas tonalidades de cores. Note que o efeito ocorreu apenas na rea fora das montanhas conforme a seleo.
Figura 5.2.1 Imagem original e imagem com aplicao do efeito DEGRADE
______________________________________________________________ Pgina - 79 -
15.3 CARIMBO A ferramenta CARIMBO utilizada para copiar trechos de uma imagem e coloc-los em outra rea da 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, ampliao da imagem, coberturas de trechos que no devem aparecer entre outras funes. Para utiliz-lo voc deve clicar na rea que deseja clonar com a tecla ALT pressionado e preencher a rea desejada. O CARIMBO oferece opes de formatos do pincel, alm de tamanho de rea que o ponteiro dever estar copiando dentro das opes do pincel, voc seleciona o dimetro do ponteiro.
Figura 5.3 Menu da ferramenta CARIMBO
Figura 5.3.1 Transformao da imagem com a ferramenta CARIMBO
______________________________________________________________ Pgina - 80 -
15.4 DESFOQUE, NITIDEZ E BORRAR A ferramenta DESFOQUE faz com que a rea da figura selecionada, perca sua nitidez, deixando com um aspecto embaado. A ferramenta NITIDEZ faz o contrrio da ferramenta DESFOQUE. Ela reconhece as cores dos pixels em volta da rea selecionada, e adiciona automaticamente contrastes e cores nas matizes dos pixels, de modo que eles fiquem mais claros e exuberantes. Ela quase consegue reverter o trabalho da ferramenta DESFOQUE. Porm, de maneira muito leve, e quando saturada ela destri os pixels da rea selecionada, transformando a figura. Deve ser utilizada com cautela. Com a ferramenta BORRAR fazemos um efeito de borro criado com o dedo sobre uma pintura ainda fresca. Ela cria bordas mais suaves quando mistura e harmoniza os pixels por onde passa. NOTA: Muitas fotos podem estar com uma excelente qualidade, e mesmo assim podem receber ainda um bom banho de tratamento. No menu IMAGEM AJUSTES, temos funes para melhorar a qualidade da foto em diferentes aspectos. Podemos ajustar os Nveis da imagem automticos que na maioria dos casos j faz uma grande diferena, ou ainda trabalhar com os nveis personalizados que oferecem trabalhos com os tons de cores, a luminosidade da imagem, brilhos e contrates, balano de cores entre outros. Com a opo SATURAR retiramos as cores da imagem mantendo o aspecto preto e branco e assim podemos designar qualquer cor para esta imagem, esta funo muito utilizada para mudar cor de olhos e cabelos, bastando apenas selecionar a rea que deseja fazer esta mudana de cor e na opo BALAO DE CORES podemos colocar a cor que quisermos e assim alterar a imagem. Outra opo para trabalhos com fotos que s vezes se torna necessrio para a montagem de uma pgina de Internet e de inverter a imagem, muito conhecido como flipar a imagem. No menu IMAGEM temos a opo rotao da imagem, ela inverte a viso da imagem como se espelha-se a mesma. EXERCCIOS PARA REVISO 1. Como diminuir o tamanho fsico de uma imagem, sem perder a sua resoluo? Onde podemos encontrar as opes no menu de tamanho da imagem? 2. Quais opes de DEGRADE podemos encontrar? 3. Para que serve a ferramenta CARIMBO?
______________________________________________________________ Pgina - 81 -
16
FERRAMENTAS 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 e aparecendo muitas vezes mais que uma imagem. Ttulos de pginas, nomes, destaque para letras e muitas outras opes que iremos aprender neste captulo.
Figura 6.0 Barra de menu das propriedades da ferramenta TEXTO Uma camada de texto no pode ser criada para imagens em modos multicanal, bitmap, ou cores indexadas, porque estes modos no suportam camadas. Nestes modos de imagem o texto aparece no Plano de Fundo e no pode ser editado. Por isso quando voc quiser trabalhar com texto trabalhe sempre com arquivos .psd. Selecione a ferramenta TEXTO e clique no ponto onde deseja inserir o texto, observe que na barra de propriedades da ferramenta textos, tm as opes como escolher a fonte, o tamanho, o espaamento entre linhas, a cor do texto, etc. O texto pode ser digitado em um novo arquivo para criao de uma nova imagem ou pode ser dentro de uma imagem j existente para definir a imagem.
______________________________________________________________ Pgina - 82 -
Figura 6.0.1 Inserindo TEXTO dentro de uma imagem Nesta imagem criamos apenas um texto definindo o que est na imagem, mas esta ferramenta oferece 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.
Figura 6.0.2 Estilos de fontes criadas com os efeitos do PHOTOSHOP
______________________________________________________________ Pgina - 83 -
EXERCCIOS PARA REVISO 1. Faa este exerccio para a criao de um estilo no TEXTO:
1. Crie um novo documento com o fundo branco e escreva a palavra que quiser, eu estou usando a FONT chamada TAG XTREME;
2. Clique com o boto direito na camada do texto e depois em Rasterize Layer; 3. Segura CTRL e clique na camada do texto para selecion-la;
4. Selecione a ferramenta GRADIENTE TOOL e crie um novo degrad parecido com o do exemplo abaixo (voc pode mudar as cores se preferir);
5. Na parte de cima e abaixo do texto, faa um trao com a ferramenta GRADIENTE e solte o boto;
6. Ainda com o texto selecionado, crie uma nova camada e selecione EDIT / STROKE;
7. Selecione agora o comando FILTER / BLUR / GAUSSIAN BLUR e coloque o RADIUS como 0,8;
______________________________________________________________ Pgina - 84 -
8. Junte o traado com a camada de texto (CTRL+E); 9. Novamente selecione EDIT / STROKE e agora faa o traado com a cor preta; 10. Pronto! Seu texto esta terminado, e assim deve ser o resultado:
Este exerccio conhecido como TUTORIAL, um passo a passo de efeitos para criao de imagens e textos para os programas de edio. Existem muitos sites que disponibilizam esses tutorais para ajudar os Designers e assim oferecer uma troca de informao entre os usurios de cada programa. Procure sempre estar praticando estes TUTORIAIS, eles so grandes exerccios para praticarmos e conhecer os recursos que o programa PHOTOSHOP disponibiliza. Procure pr sites como http://www.webtutoriais.com.br oferecem vrios efeitos e dicas para os usurios trocarem entre si.
______________________________________________________________ Pgina - 85 -
17
. CRIAES
DE ARQUIVOS PARA WEB
Quando utilizamos a Internet procura de informaes, queremos que estas cheguem o mais breve possvel em nosso computador. Mas, com o aprimoramento da parte visual das pginas, s vezes ficamos um bom tempo esperando uma figura ser carregada pelo navegador, mesmo com conexes de banda larga, e pior para conexes discadas, por isso importante que ao editar uma imagem para publicao na WEB lembre-se que quanto maior o tamanho do arquivo da imagem, maior ser o tempo de recebimento (dowload) desta pgina. Na verso mais recente do PHOTOSHOP, foi includa a opo SALVAR PARA WEB do menu ARQUIVO, esta opo facilita ao salvar uma imagem e assim trabalhar com sua qualidade e tamanho de 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 fsico da imagem vai depender do espao que voc estar utilizando a mesma, lembrando que tente editar a imagem no tamanho que ser utilizado, pois na opo SALVAR IMAGEM tambm podemos alterar este tamanho fsico, mas perdemos em resoluo de pixels. Normalmente utilizamos para internet imagens com extenso GIF ou JPG que trazem uma boa resoluo e um tamanho de arquivo pequeno para carregar nas pginas. GIF ANIMADO uma animao feita em camadas, ou seja, aquele tipo desenho que fazemos no papel passando pginas ele d movimento conforme a velocidade, PNG uma extenso grande que possibilita alterar o arquivo, 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 revistas e jornais.
______________________________________________________________ Pgina - 86 -
Figura 7.0 rea de Salvar Imagem para WEB Neste exemplo estamos salvando um arquivo tipo JPG, observe que temos algumas abas acima da imagem que possibilita visualizar a imagem original e a imagem editada. Na rea SETTINGS selecionamos a extenso na qual ser salvo o arquivo, abaixo o nvel de proporo e a qualidade desta proporo de pixels; a caixa PROGRESSIVE pode manter a qualidade da imagem e diminuir o tamanho do arquivo, ela mostra a imagem gradualmente enquanto est sendo carregada. Note que a imagem original tem o tamanho de 3,37M e a que ser salva para a Web possue 52,98K, mantendo o mesmo tamanho fsico, alterando apenas a qualidade da imagem. NOTA: Sempre que criar um arquivo com vrias imagens, efeitos e camadas, salve a opo PNG para possveis alteraes que queira fazer futuramente. Este extenso de arquivo ir possibilitar que voc trabalhe todas as layers, camadas e efeitos que foram utilizados. Mas verifique se voc possue espao para salvar arquivos com esta extenso, pois os arquivos PNG ficam com grande tamanho ao salvar e no devemos alterar a proporo e qualidade das imagens.
______________________________________________________________ Pgina - 87 -
EXERCCIO PARA REVISO 1. Agora que voc aprendeu a editar e criar uma imagem, salve a imagem com a melhor extenso que puder colocar em um site, com uma boa qualidade e um tamanho de arquivo que no interfira nesta qualidade.
______________________________________________________________ Pgina - 88 -
18
arquivos simultaneamente.
. VOCABULRIO UTILIZADO NO PHOTOSHOP
Quando comeamos a trabalhar com o PHOTOSHOP, vamos descobrindo novas ferramentas e assim novas palavras; pode-se dizer que o PHOTOSHOP tem seu prprio vocabulrio, quando se trata de passar informaes entre seus usurios, aqui est disponvel uma pequena lista de algumas palavras utilizadas: ANTIALIASING Numa imagem do tipo bitmap, a suavizao das bordas dos objetos para que no fiquem com aspectos serrilhados. BATCH Recurso do PHOTOSHOP que permite a aplicao de uma ao a um conjunto de
BLENDING Mistura de duas ou mais cores em um polgono ou pixel na construo de imagens digitais, criando uma nova cor. No PHOTOSHOP, os efeitos de blending podem ser aplicados individualmente, em cada camada do arquivo. CAMADAS Componentes que se comportam como folhas de papel transparente, permitindo o empilhamento de elementos numa imagem. As camadas podem ser editadas separadamente e ocultadas. CANAL ALFA Canal de informao contido em arquivos de imagem. Armazena dados sobre selees, mscaras e transparncias. FATIAMENTO Recurso que permite dividir uma imagem em partes menores, para facilitar seu carregamento em pginas web, ou usar efeitos especiais. Ao fatiar uma imagem, o PHOTOSHOP cria tambm o cdigo HTML necessrio para que ela seja exibida corretamente. FILE BROWSER Ferramenta do PHOTOSHOP que permite visualizar miniaturas dos arquivos antes de abri-los. O FILE BROWSER tambm possibilita a realizao de operaes simples como rotao das imagens e incluso de metadados.
______________________________________________________________ Pgina - 89 -
HISTORY Paleta do PHOTOSHOP que registra toas s aes feitas na imagem. Ela contm o histograma, um grfico que mostra a quantidade de pixels de cada nvel de luminosidade da imagem. No PHOTOSHOP, o histograma permite ajustar caractersticas como contraste e colorao.
______________________________________________________________ Pgina - 90 -
19
de seu site. para grandes leituras.
. SEJA UM BOM WEB DESIGNER!
Para poder criar um site como um bom Web Designer, preciso seguir algumas regras, no s para tornar 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 muita informao, colocando apenas o essencial numa pgina, principalmente se for pgina principal
EVITE TEXTOS LONGOS Textos longos devem ser resumidos ao mximo ou divididos em vrias pginas pequenas, sempre evitando textos longos. USE IMAGENS Sempre que possvel, use imagens no lugar de textos, uma imagem expressa muito mais que palavras s vezes, principalmente na internet, onde o usurio no tem pacincia
EVITE OS EXAGEIROS Jamais utilize coisas do tipo msicas de fundo, bolas e figuras como Gifs animadas e todo tipo de elemento semelhante. Nem pense em usar clipart em suas homepage, um Gif Animado pode ser utilizado s vezes na criao de um logo ou bunner, mas sem muito exagero de efeitos. FAA PGINAS LEVES Nenhuma pgina do site deve demorar a carregar, caso seu contedo seja 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 que deve acessar o mesmo contedo. Caso uma conexo mais lenta, uma visualizao de 800x600, diferentes navegadores, este o tipo de usurio que devemos atingir.
______________________________________________________________ Pgina - 91 -
CORES E FONTES Utilizem sempre cores para destacar elementos, mas no de uma forma to destacada, mistura de cores e tudo mais, pois muitas cores podem fazer um belo carnaval do seu site. Cuidado ao utilizar fontes diferentes, nem sempre o usurio ter este tipo sofisticado de fonte que voc queira utilizar, normalmente um tipo de fonte ARIAL, TIMES e suas derivadas pode ser ideal. Se precisar usar algum tipo de fonte diferente, crie a mesma como uma figura que possa carregar no navegador do usurio sem sofrer alteraes. EMOO X RAZO - D preferncia a usar o lado emocional em vez do racional quando criar um design, algo que agrade aos olhos e a navegao do usurio com simplicidade.
______________________________________________________________ Pgina - 92 -
20
. APRESENTANDO
O DREAMWEAVER
O DREAMWEAVER MX um editor de HTML profissional para o desenvolvimento de pginas, sites e aplicativos para a INTERNET que j bastante utilizado no meio dos desenvolvedores pela facilidade que sua interface apresenta. Ele oferece ferramentas suficientes para aqueles que gostam de trabalhar em modo texto, como por exemplo, as dicas de cdigo que so exibidas medida que so digitados os comandos. Tambm facilita a vida daqueles que no tem afinidade com cdigos HTML, ele possui uma interface grfica que possibilita a criao de pginas, sites e aplicativos sem a necessidade de digitao de uma nica linha de cdigo; possuindo painis, guias, menus e o inspetor de propriedades junto da rea de trabalho, facilita-se a busca de problemas e se agiliza as definies em geral.
Figura 1.0 rea de trabalho do Dreamweaver
._____________________________________________________________ Pgina - 93 -
20.1 BARRA TTULO A barra de ttulos contm o nome do programa que est sendo usado, no caso, Micromedia Dreamweaver e o nome 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 mais utilizadas na construo do site. Para exibi-la ou ocult-la clique no menu JANELA e selecione a opo INSERIR.
Figura 1.1 Barra Inserir Nessa guia h algumas ferramentas bsicas, algumas esto cobertas, pois no iremos aprofundar muito o contedo das mesmas, outras como (da esquerda para a direita): HIPERLINK: inserir link; E-MAIL: link para e-mail; ANCORA: link para um lugar especfico dentro do prprio documento ou outro qualquer; INSERIR TABELA: inseri tabelas; DESENHAR: desenha camadas; IMAGEM: insere uma imagem; IMAGEM ROLLOVER: insere uma imagem que substituda por outra ao passar do mouse; MENU DE NAVEGAO: cria um menu com troca de imagens; LINHA HORIZONTAL: insere linhas horizontais; DATA: insere datas COMENTARIOS: insere comentrios
20.4 BARRA DE FERRAMENTAS DOCUMENTO Denominada documento essa barra possui ferramentas que exibem informaes do arquivo em edio, tais como, o ttulo, exibio de layout, layout e HTML e apenas o HTML. muito usada na manuteno dos sites, quando h necessidade de correes no cdigo HTML.
._____________________________________________________________ Pgina - 94 -
Para exibi-la ou ocult-la clique no menu EXIBIR e selecione BARRA DE FERRAMENTAS na opo DOCUMENTO (Document).
Figura 1.2 Barra de ferramentas documento 20.5 PAINIS Os painis possuem informaes relacionadas a aes avanadas dentro de uma pgina. Dentre os principais existentes podemos destacar: Design: onde buscaremos informaes sobre o arquivo css que ser vinculado ao arquivo; Arquivos: onde teremos a definio e a respectiva rvore de diretrios do site em evidncia. Esses painis podem ser exibidos e ocultados atravs do menu janela na opo ocultar painis.
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 de painis arraste o grupo atravs da pina. Para agrupar um painel em outro grupo de painis clique no 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 rea de desenvolvimento est como ser exibido no browser, excetuando-se as linhas e marcas de smbolos 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 um separadamente. Ao criar documentos no DREAMWEAVER, o cdigo HTML gerado automaticamente. O interessado no apenas a visualizao, mas a possibilidade de trabalhar e editar o cdigo ou o projeto. As alteraes realizadas atualizam automaticamente o documento; somente o cdigo; cdigo e projeto; somente o projeto.
._____________________________________________________________ Pgina - 95 -
20.9 BARRA DE STATUS Os elementos da barra de status so: Seletor de tags: exibe as tags dos objetos selecionados na pgina;
Tamanho da janela: permite definir o tamanho da janela configurando-a para caber nos diversos tamanhos 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 arquivos dependentes. Mostrando o tempo estimado para carreg-lo no navegador. Por padro calculado o tempo 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 mais utilizados para facilitar o acesso aos comandos e propriedades mais utilizados, relativos ao objeto ou janela que est sendo trabalhada. Os menus contextuais contm apenas a lista dos comandos que pertencem seleo atual. Abra o menu contextual, clicando o boto direito do mouse no objeto ou janela.
EXERCCIOS PARA REVISO 1. Quais as categorias da Barra Inserir? Qual a funo geral desta barra? 2. Quais os elementos que compem a Barra de Ferramentas Documentos? Qual a funo geral desta barra? 3. Qual a funo do menu Arquivo (file)?
._____________________________________________________________ Pgina - 96 -
21
CRIANDO UM NOVO SITE
Para iniciar a construo de um site, vamos primeiramente criar uma pasta para colocarmos os arquivos que iremos utilizar neste site, podemos chamar a pasta de DWMX. Agora clique no menu SITE / NOVO SITE (new site), onde estaremos trabalhando com um assistente de criao para a criao deste site. Ao aparecer este assistente, verifique se a aba se encontra selecionada no BSICO 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 arquivos localmente e ento public-los no servidor remoto. Para o prximo passo, selecione a pasta que iremos 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 das configuraes que foram feitas de uma forma resumida, agora podemos dar seqncia nas configuraes ou fazer alguma alterao se for necessrio.
Figura 2.0 Concluindo o assistente de criao de site
._____________________________________________________________ Pgina - 97 -
22
teste.html.;
. 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. Para criar um novo documento, escolha ARQUIVO (FILE) / NOVO (NEW); clique na guia geral e escolha a Pgina Bsica na lista de categorias; escolha HTML na lista da coluna Pgina Bsica e clique no boto criar. Mesmo antes de terminar o seu documento voc deve salvlo. Se voc no salvar um documento e inserir objetos grficos no mesmo, estes estaro num caminho de nome file://. Algumas convenes para salvar um arquivo: Seu documento poder ter a extenso .htm ou .html, porm Teste.htm diferente de Use apenas caracteres alfanumricos (AZ ou az) e nmeros (0 a 9); Jamais use espaos em nomes de arquivos. Use caracteres de sublinhado ou hfen para simular um espao, se voc precisar separar palavras. No use quaisquer caracteres especiais, como >, <, *, / entre outros. Evite iniciar seus nomes de arquivos com nmeros.
22.2 CRIANDO O ARQUIVO INDEX.HTM Ao carregar um site, a pgina inicial de suma importncia, pois atravs dela que podemos abrir um conjunto de pginas relacionadas (site). Para o DREAMWEAVER, a pgina inicial (home page) dever receber o nome de index.htm ou index.html. Para cri-la: Clique com o boto direito do mouse na pasta local do site; Escolha a opo NOVO ARQUIVO (File/New). adicionada uma nova pgina ao site; Renomeie para index.htm. Todo documento HTML que voc cria precisa ter um ttulo. O ttulo usado principalmente para identificao do documento. Ele apresentado na barra de ttulo do navegador. Escolha uma frase curta e informativa que descreva o objetivo do documento.
._____________________________________________________________ Pgina - 98 -
NOTA: O DREAMWEAVER possui layouts prontos para inserir seu contedo. No menu ARQUIVO, clique no comando NOVO, ser aberta a caixa de dilogo novo documento com a guia Geral j selecionada. Na lista Categoria, selecione o tipo de pgina: Page Designs, selecione o tipo de layout desejado, observe que na janela preview possvel observar o modelo e abaixo temos um resumo dos elementos de design utilizado. 22.3 DEFININDO AS PROPRIEDADES DA PGINA Vamos trabalhar o layout desta nova pgina que criamos, as propriedades como COR DE FUNDO (BG COLOR) aparece uma paleta de cores com o cone de conta-gotas para selecionar a cor, podemos tambm inserir o cdigo hexadecimal para inserir diretamente uma tonalidade pessoal. Para definir uma imagem ou uma cor para o fundo da pgina, use a caixa de dilogo das propriedades da pgina. Se voc usar uma imagem de fundo e uma cor do fundo, a cor aparece enquanto so carregadas as imagens, e ento a imagem se sobrepe cor. Se a imagem de fundo contiver rea de transparncia, a cor do fundo tambm aparece.
Figura 3.3 Pgina de propriedades
._____________________________________________________________ Pgina - 99 -
22.4 INSERINDO TABELAS A maneira mais comum de dispor os elementos numa pgina trabalhando com tabelas. Uma tabela formada de trs elementos: Linha: espaamento horizontal entre uma borda e outra; Coluna: espaamento vertical entre uma borda e outra; Clula: espao resultante da interseo de uma linha com uma coluna.
Figura 3.4 Linha, Colunas e Clulas Existem duas maneiras de criar tabelas: pelo Painel Inserir Comuns > Inserir tabela, ou pela barra de menus Inserir > Tabela. Vamos criar uma tabela com 3 linhas e 1 coluna, largura de 760 pixels, preenchimento da clula = 0, espaamento entre as clulas = 0 e borda = 0. Clique em OK.
Figura 3.4.1 Configurao de uma tabela Aps inserir a tabela, vamos trabalhar com as propriedades, quando a tabela estiver selecionada, suas caractersticas aparecero no Inspetor de Propriedades. No campo Alinhar (Align) selecione a opo Ao centro (center). H opes como tamanho de borda (Border), espaamento dentro da borda, cor, altura que podemos alterar conforme a necessidade. Observe que podemos fazer todas as alteraes nas tabelas alterando apenas os campos na Barra Propriedades (Properties), sem precisar alterar diretamente no cdigo.
._____________________________________________________________ Pgina -100 -
Figura 3.4.2 Barra de propriedades para configurao de uma tabela Podemos ainda inserir mais linha e colunas na tabela j existente conforme a necessidade, Selecione uma linha da tabela e clique com o boto direito do mouse sobre a rea selecionada, no menu de opes que ser exibido selecione as opes Tabela > Inserir Linhas ou Colunas. Na outra janela que se abre selecione o nmero de linhas ou colunas que deseja inserir e a posio em que elas sero includas. H ainda a opo de editar uma linha j existente, para dividir: Selecione a clula, linha ou coluna que pretende dividir e no Inspetor de propriedades selecione as opes Clula > Divide as clulas em linha ou colunas; Para mesclar: Selecione as clulas, linhas ou colunas que pretende mesclar e no Inspetor de propriedades selecione as opes Clula / Linha > Mesclar as clulas selecionadas utilizando extenses. Se for necessrio excluir linhas ou colunas, posicione o cursor sobre a linha ou coluna a ser excluda, clique sobre a rea selecionada com o boto direito do mouse e no menu de opes que ser exibido escolha as opes Tabela > Deletar Linha / Deletar Coluna.
Figura 3.4.3 Barra de propriedades para atalhos das clulas 22.5 MAPEAMENTO DE IMAGENS O mapeamento de imagens utilizado quando h necessidade de colocar vnculo em apenas uma parte de uma imagem, e no na imagem toda. Selecione uma imagem (na primeira linha da tabela). Vamos mapear a rea da imagem onde aparece alguma palavra ou objeto em
._____________________________________________________________ Pgina -101 -
destaque, colocando um link para a pgina index.html. Com a imagem selecionada, veja que a Barra de Propriedades (Properties) disponibiliza trs tipos de mapas: retangular, oval e poligonal. Selecione a opo retangular, como mostra a figura abaixo.
Figura 3.4.4 Formas de mapeamento (link) das imagens. EXERCCIOS PARA REVISO 1. Qual o procedimento bsico para a criao de uma nova pgina em branco? 2. Cite algum nmero hexadecimal para as cores que voc ir utilizar na criao de seu site. 3. Defina como formada uma tabela.
._____________________________________________________________ Pgina -102 -
23
moldura.
LINKS E NAVEGAO
O DREAMWEAVER oferece diversos modos de criar links de hipertexto para documentos, imagens, arquivos d multimdia ou programas dos quais se pode efetuar o download. Podem ser estabelecidos links com qualquer texto ou imagem em qualquer parte de um documento, inclusive texto ou imagens localizados em um cabealho, lista, tabela, camada ou
23.1 LOCALIZAO E CAMINHOS DOS DOCUMENTOS Cada pgina da Web tem um endereo nico chamado Universal Resource Locator (URL). Ao criar links, essencial compreender o caminho de arquivo entre o documento do qual parte o link e o que est sendo vinculado. Veja alguns tipos de links: Internos para documentos de um mesmo site; Externos para documentos de um outro site; Correio Eletrnico para enviar mensagens atravs do gerenciador de e-mails; ncoras para sees especficas de uma pgina; Quando se cria um link preciso definir o caminho entre o documento de onde parte o link at o que est sendo chamado. Esse caminho pode ser absoluto ou relativo: Caminho absoluto usado para estabelecer um link a um documento em outro servidor, preciso fornecer a URL (endereo) completa do documento que est sendo chamado. Por exemplo http://www.xxx.com.br/treinamentos/index_treinamentos.html. Caminho relativo usado para criar vnculos locais na maioria dos sites. til para estabelecer vnculos com documentos situados na mesma pasta ou em outra pasta do mesmo site, atravs de caminhos de estrutura das pastas. Nesse caso, coloca-se somente o segmento do caminho, no necessrio especificar a URL.
Figura 4.1- Barra de Propriedades (Properties) para os comandos de LINK
._____________________________________________________________ Pgina -103 -
Observe na rea em vermelho que temos a pgina que a figura est direcionando o link, antes de inserir este caminho, o campo vem preenchido com # que s deve ser tirado caso tenha um caminho de link. No campo TARGET abaixo do campo LINK, definimos se este link ir abrir em uma nova pgina ou dentro desta mesma pgina que estamos navegando. Para inserir um link dentro do texto que pode vir acompanhado da imagem, ou apenas em alguma palavra, o procedimento ser o mesmo que a figura, selecionando o texto ou a palavra e inserindo o link dentro do campo LINK na Barra de Propriedades (Properties).
Figura 4.1.2- Barra de Propriedades (Properties) para os comandos de LINK Para definir um link de correio eletrnico: coloque a expresso mailto: e em seguida o e-mail do destinatrio, exemplo mailto:fulano@uol.com.br. As NCORAS so utilizadas em pginas que possuem contedo muito extenso. Atribui-se um ncora para cada pargrafo ou para cada tpico da pgina, e depois cria-se um menu no incio da mesma com links para essas ncoras. Esse recurso agiliza a navegao pelo contedo da pgina, dispensando o uso da barra de rolagem, que normalmente se forma nesses documentos muitos extensos. Para inserir uma ncora, na barra de menus selecione INSERIR / NCORA com nome, ou no Painel Inserir: COMUNS / NCORA com nome: Coloque o cursor no incio do tpico, ou seja, no comeo do texto. Na barra de menus selecione INSERIR / NCORA com Nome, ou no Painel Inserir: COMUNS / NCORA com Nome. Na janela que se abre, digite o nome da ncora: no caso a palavra que deve buscar, e clique em OK. Faa o mesmo procedimento para os demais tpicos, as prximas ncoras devem receber outras palavras. Crie um menu no incio da pgina, contendo apenas os ttulos dos tpicos, as informaes mais importantes do texto. Vincule cada nfo do menu a sua respectiva ncora. Selecione o nfo do menu, e no campo Link do Inspetor de Propriedades digite o nome da ncora precedido pelo smbolo #. Exemplo: #informatica importante tambm disponibilizar uma forma do usurio voltar para o menu no topo da pgina aps ter acessado um determinado tpico. Para isso, insira uma ncora no incio da pgina, antes do menu. Essa ncora ter o nome de topo. Em seguida digite a palavra Topo no final de cada tpico e faa um link para a ncora topo (#topo).
._____________________________________________________________ Pgina -104 -
NOTA: Se a ncora fosse chamada de uma outra pgina, o link ficaria assim: pagina.html#ancora.
Imagem Inserindo um link ANCORA no texto Observe nesta imagem que foi criado o menu superior e em cada palavra deste, foi inserido um link como mostra na Barra Propriedades (Properties) com o nome #lorem1, este link vai buscar no texto o link NCORA que foi inserido ao em cada parte do texto que iremos buscar diretamente. 23.2 TESTANDO A PGINA Podemos testar os LINKs em um navegador, para garantir o funcionamento da pgina conforme o que foi feito. Salvamos o arquivo e pressionamos a tecla F12, assim podemos testar os links e formato da pgina dentro do navegador do usurio.
._____________________________________________________________ Pgina -105 -
EXERCCIOS PARA REVISO 1. Monte 3 pginas e insira os diversos tipos de links apresentados neste captulo, lembrando sempre de fazer o teste no navegador se est direcionando os links corretamente.
._____________________________________________________________ Pgina -106 -
24
fax);
FORMULRIOS
Muitas pginas utilizam formulrios para obter informaes das pessoas que esto visitando sua pgina e solicitando seus servios. 1) No corpo da pgina, dentro da tabela, digite o ttulo "Atendimento ao Consumidor" em negrito. Na Barra Propriedades (Properties) escolha fonte verdana, tamanho 2. 2) Pule uma linha e digite "Contato" e em seguida os dados da empresa (e-mail, telefone,
3) Em seguida digite: "Se voc tem alguma dvida ou sugesto sobre os nossos produtos, preencha o formulrio abaixo:"; 4) Na barra Inserir, selecione o tem Formulrio; 5) Selecione a primeira opo Formulrio, para que ele crie a tag form (como se fosse a moldura do formulrio); 6) Dentro da tag form, pule uma linha e digite "Nome:"; Na frente do nome crie um campo de formulrio, ser um campo texto: crie um campo texto clicando na 2 opo Campo de texto;
Selecione esse campo e na Barra Propriedades (Properties) preencha as propriedades do campo: Campo de texto (nome do campo): nome Largura do caractere (tamanho da moldura do campo): 50 Nmero mximo de caracteres. (nmero mximo de caracteres que podero ser digitados): 50 Tipo (tipo de linha): Linha simples Valor inicial (valor inicial): deixar em branco
._____________________________________________________________ Pgina -107 -
7) Pule uma linha e digite "E-mail:" Na frente do e-mail crie um campo de formulrio, ser um campo texto: crie um campo texto clicando na 2 opo Text Field.
Selecione esse campo e na Barra Propriedades (Properties) preencha as propriedades: Campo de texto (nome do campo): e-mail Largura do caractere (tamanho da moldura do campo): 40 Nmero mximo de caracteres (nmero mximo de caracteres que podero ser digitados): 40 Tipo (tipo de campo): Linha simples. Valor inicial (valor inicial): deixar em branco.
8) Pule uma linha e digite "Sexo:" Crie um campo texto clicando na 8 opo Menu de Lista Sexo: Selecione esse campo e no Inspetor de Propriedades preencha as propriedades: Lista / Menu (nome do campo): sexo Tipo (tipo de lista, as opes tm a mesma funo, s muda a forma de exibio). Clique no boto Valores da lista: adicione os valores "masculino" e "feminino" (para adicionar um novo valor clique no sinal +). Clique em OK.
9) Pule uma linha e digite "Dvidas ou sugestes:" Crie um campo texto clicando na 4 opo rea de texto
Selecione esse campo e no Inspetor de Propriedades preencha as propriedades: Campo de texto (nome do campo): sugestes Largura do caractere (tamanho da moldura do campo): 50 Nmero mximo de caracteres. (nmero de linhas do campo): 5
._____________________________________________________________ Pgina -108 -
Tipo (tipo de campo): Multi-linha Valor inicial: deixar em branco
10) Pule uma linha e crie um boto clicando na opo 11 opo Boto Selecione esse campo e no Inspetor de Propriedades preencha as propriedades: Boto (nome do boto): Submit Action (ao): Enviar formulrio
Obs: a ao reset form serve para limpar os campos do formulrio. 11) Edite o cdigo HTML e no action da tag form coloque o e-mail para onde sero encaminhados os dados (mailto:xxxxxxxxxxx). O formulrio ser exibido dessa forma:
Nome: E-mail: Sexo: Dvidas ou Sugestes:
._____________________________________________________________ Pgina -109 -
25
do site.
. DICAS PARA A CRIAO DE UM SITE
Crie um esboo, desenhe as vrias pginas imaginando como seria o seu visual em tela, posio das fotos, textos, ttulos etc. Faa um estudo prvio: marque reunies com o seu cliente, converse e discuta solues com a equipe de cliente, converse e discuta solues com a equipe de desenvolvimento, pesquise outras fontes de informaes, formule perguntas e obtenha as respostas necessrias para construo do site. Apresente uma resposta com o projeto que pretende executar, tempo e custo. Faa um contrato, ele um instrumento legal de comum acordo entre ambas as partes. Cronograma, atravs dele ser possvel definir as etapas e perodos de desenvolvimento Defina o objetivo do site. formal ou informal? Usa cores fortes ou discretas? Veicula em outros meios de comunicao? Pblico Alvo: quem visitar seu site?
25.1 - DEFINIR O CONTEDO, O QUE SER DIVULGADO NO SITE Informaes pessoais: informaes sobre voc; Publicaes como jornais, revistas; Perfis da empresa; segmento da empresa; clientes, parceiros, etc.
25.2 - ESTABELECER OBJETIVOS Voc deve perguntar-se o que os usurios vo estar procurando no site; Qual o objetivo do site; Antes de comear entrar com cdigos ou imagens voc deve pensar o que voc quer colocar em sua pgina; Como ser estruturada? Ela est adequada ou no ao meu pblico alvo? Ao Desenvolver um site para uma empresa ou pessoas, importante que voc colha junto ao seu cliente seus objetivos, idias, a forma que imagina sua pgina, etc; Assim ficar bem mais fcil de comear seu trabalho.
._____________________________________________________________ Pgina -110 -
25.3 - DIVIDA O SEU CONTEDO EM TPICOS Crie uma lista com os principais tpicos, a princpio no importa a ordem. Esta forma de comear a se organizar. Sua lista poder ter quantos tpicos desejar, mas cuidado, o seu leitor poder se cansar e se perder em meio a tantas opes. 25.4 - QUAIS AS QUESTES QUE DEVO LEVANTAR COM RELAO ORGANIZAO E NAVEGAO DE UM SITE Ser que os usurios conseguem navegar pelo contedo de cada tipo de estrutura para encontrar as informaes de que precisam. Como ter certeza de que os usurios conseguem se localizar nos meus documentos (contexto) e achar o caminho de volta at uma posio conhecida. 25.5 - PRXIMA ETAPA DO PLANEJAMENTO Sua apresentao da Web consiste em determinar o contedo que ser apresentado em cada uma das pginas e criar alguns vnculos (links) simples que possibilitem a navegao por essas pginas. Coloque cada tpico em uma pgina, mas se tiver um grande nmero de tpicos, a manuteno e vinculao podem se tornar maante. Defina bem a forma de navegao entre as pginas. Se houver formas alternativas, torne a navegao para os leitores a mais intuitiva possvel. Tome cuidado com o que ser includo na home page, lembre-se que ela ser a porta da sua apresentao. Tenha sempre em mente seus objetivos. Procure no se distanciar deles.
NOTA: A disposio de imagens, textos, vdeos, etc. Tudo que voc desejar colocar em sua pgina precisa ser colocado de forma agradvel ao leitor. Abordamos, de forma geral, a diagramao. Esta palavra vem do mundo dos impressos. Trata-se da disposio de elementos que compem uma pgina, deve ser observado o tamanho das fontes, disposio das imagens, forma como o texto ser apresentado, etc. Uma boa diagramao tambm garante o retorno do usurio.
._____________________________________________________________ Pgina -111 -

Curso+de+Webdesign+ +CursosOnlineGratis

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Curso+de+Webdesign+ +CursosOnlineGratis

Enviado por

Direitos autorais:

Formatos disponíveis

NDICE

. CRIANDO DOCUMENTOS HTML

<Hy> Texto do Cabealho </Hy>

Fgura 2.1 Modelo de Cabealhos

Fgura 2.2 Modelo de alinhamento de pargrafos

Fgura 2.3 Modelos de quebra de linha

2) Quais os elementos bsicos de uma pgina HTML?

3) Qual a diferena entre a tag <p> e a tag <br>?

4) Quando utilizamos os comentrios?

______________________________________________________________________ Exerccios Reviso

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

ARIAL, TIMES NEW ROMAN, GEORGIA, COURIER, VERDANA.

Fgura 3.1 Modelo de Formatao de Fontes

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

2) O que significa os atributos FACE e SIZE?

2) Qual a funo da tag <DIV>?

______________________________________________________________________ Exerccios Reviso

. CONTROLE DE CORES E GRFICOS DE FUNDO

Fgura 4.1 Modelo do atributo background

Fgura 4.2 Modelo de uso do atributo BGCOLOR DICAS:

4.2CORES DE LETRAS E LINKS 4.2.1 ATRIBUTO TEXT

Fgura 4.3 Modelo do uso do atributo TEXT

ATRIBUTO LINK, VLINK E ALINK

boto do mouse e ainda no soltou. Cor padro vermelho.

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

Fgura 4.4 Modelo de cores de Links

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: ____________________________________________________________________________

______________________________________________________________________ Exerccios Reviso

<a name=nomedaseo> </a>

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

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

Fgura 5.1 Modelo de links para documentos localizados em outros diretrios

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

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

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

______________________________________________________________________ Exerccios Reviso

Fgura 6.1 Modelo de lista no numerada

6.2 LISTAS NUMEREDAS

Fgura 6.2 Modelo de Lista numerada

Fgura 6.4 Modelo de Lista Intercalada

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

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

______________________________________________________________________ Exerccios Reviso

7.1 INSERINDO IMAGENS NA PGINA Comando:

Fgura 7.1 Modelo de insero de imagens

Fgura 7.2 Modelo de redimensionamento de imagens NOTA:

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

ALINHAMENTO EM RELAO AO NAVEGADOR

Em relao ao navegador, utilizamos duas posies sendo estas:

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

colocado sobre a imagem.

Fgura 7.5 Modelo de utilizao do atributo ALT

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

5) O atributo ALT utilizado para:

______________________________________________________________________ Exerccios Reviso

Fgura 8.1 Primeiro modelo de tabela

Fgura 8.2 Segundo exemplo de tabela

Fgura 8.3 Modelo de atributo width na tabela

Fgura 8.5 Modelo do uso do atributo BORDER

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

TOP : alinhamento ao topo; MIDDLE: alinhamento ao centro; BOTTOM: alinhamento ao rodap.

Fgura 8.8 Modelo de uso do atributo CELLSPACING com valores variados

4) Defina os atributos: a) LINK: _ b) VLINK: c) ALINK: