Escolar Documentos
Profissional Documentos
Cultura Documentos
Curso Web Designer PDF
Curso Web Designer PDF
Curso
Web Designer
Carga horria: 60hs
Dicas importantes
Leia cada trecho do contedo com ateno redobrada, no se deixando dominar pela
pressa.
Todos tm acesso aos mesmos cursos, mas o aproveitamento que cada aluno faz do
seu momento de aprendizagem diferencia os alunos certificados dos alunos
capacitados.
Busque complementar sua formao fora do ambiente virtual onde faz o curso,
buscando novas informaes e leituras extras, e quando necessrio procurando
executar atividades prticas que no so possveis de serem feitas durante o curso.
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
PHOTOSHOP
14.1 FILTROS............................................................................................. 75
EXERCCIOS PARA REVISO..................................................................... 76
15.1 PINCEL............................................................................................... 78
15.2 FERRAMENTA DEGRAD................................................................ .78
15.3 CARIMBO........................................................................................... 80
15.4 DESFOQUE, NITIDEZ E BORRAR.................................................... 81
EXERCCIOS PARA REVISO..................................................................... 81
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 (/).
____________________________________________________________ Pgina - 1 -
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 -
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:
____________________________________________________________ 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>
2.1.2 CABEALHO
____________________________________________________________ Pgina - 5 -
COMANDO:
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>
____________________________________________________________ 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>
____________________________________________________________ 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>
____________________________________________________________ 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:
<h1> ... <h6> Elemento que define cabealhos, desde de o nvel 1 (maior destaque) at o nvel 6
(menor destaque).
____________________________________________________________ Pgina - 9 -
2.1.7 DICAS
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>.
____________________________________________________________ Pgina - 10 -
REVISO CPITULO 1 e 2
1) Qual o smbolo que determina o fechamento de uma tag?
______________________________________________________________________ Exerccios
Reviso
3 . FORMATAO DE TEXTOS
3.1DEFININDO FONTES
A tag <font> permite que voc insira em sua pgina um texto com fontes, tamanhos, cores e
tipos diferentes.
COMANDO:
Onde:
SIZE: indica o tamanho da fonte que varia de 1 a 7, sendo 3 o valor padro da maioria dos
navegadores.
FACE: indica o nome da fonte utilizada. As fontes padres da maioria dos navegadores so:
ARIAL, TIMES NEW ROMAN, GEORGIA, COURIER, VERDANA.
COLOR : Define a cor da fonte do texto, em hexadecimal.
____________________________________________________________ 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.
O HTML define muitos elementos para formatar textos, como por exemplo escrever em negrito,
itlico ou sublinhado.
ELEMENTO 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> <br>
Este texto contm uma parte alinhada mais <sup>acima</sup>
</body>
</html>
____________________________________________________________ Pgina - 12 -
Fgura 2.4 Modelo de formatao de texto
<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?
______________________________________________________________________ Exerccios
Reviso
4 . CONTROLE DE CORES E GRFICOS DE FUNDO
Uma cor ou imagem de fundo bem escolhidos podem melhorar o aspecto da pgina, mas uma
m escolha capaz de causar danos muito graves na legibilidade e no aspecto geral.
A maioria dos browsers permite a utilizao de cores, apenas 256, mas j o suficiente para
criar uma pgina com fundo e textos personalizados.
As cores so compostas por cdigo RGB (red, green, blue). Cada cdigo define a intensidade
do vermelho, do verde e do azul.
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:
<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:
<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:
____________________________________________________________ Pgina - 16 -
4.2CORES DE LETRAS E LINKS
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:
<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>
____________________________________________________________ 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.
COMANDO:
<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?
4) Defina os atributos:
a) LINK: _____________________________________________________________________________
b) VLINK: ____________________________________________________________________________
c) ALINK: ____________________________________________________________________________
______________________________________________________________________ Exerccios
Reviso
5 . LINKS
O principal poder do HTML, est na capacidade de ligar partes de textos e imagens a outros
documentos. A interligao entre documentos feito utilizando a tag <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.
5.1NCORAS
As ncoras so links que utilizamos quando queremos buscar o contedo na mesma pgina.
So muito utilizadas em pginas que tm o contedo extenso, onde definimos sees na pginas, sendo
que cada seo ter um nome que servir de referncia para o link.
Para criarmos uma ncora selecionamos um local da pgina para inser-la.
Onde:
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.
____________________________________________________________ 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 #.
Exemplo:
Ao clicar no link Pagina 1, na pgina index.html, queremos quer abra a pgina pagina1.htm,
localizada dentro do diretorio pagina1.
____________________________________________________________ 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?
<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:
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:
Onde:
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.
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?
3) Como fazer links com arquivos que esto em outros diretrios, o que utilizamos?
______________________________________________________________________ Exerccios
Reviso
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.
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>
____________________________________________________________ Pgina - 25 -
6.2 LISTAS NUMEREDAS
Comando:
<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
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:
<html>
<head>
<title> Listas de Definies </title>
</head>
<body>
<h1> Listas de Definies</h1>
<DL>
<DT><b>Listas no numeradas</b>
<DD> As listas no numeradas ou pontuadas inserem marcadores na frente de
cada item.
</DL>
<DL>
<DT><b>Lista numeradas</b>
<DD>As listas numeradas inserem nmeros ou letras na frente de cada item.
</DL>
<DL>
<DT><b>Lista de Definies</b>
<DD>As listas de definies so diferentes das demais listas pois possuem
dois elementos: o item e a descrio do item.
</DL>
</body>
</html>
____________________________________________________________ Pgina - 28 -
Fgura 6.3 Modelo de lista de definies
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:_________________________________________________________________
4) Para escreve uma lista alfabtica, qual o comando devo utilizar? Escreva o comando.
______________________________________________________________________ Exerccios
Reviso
7 . Imagens
Hoje em dia, a grande maioria dos navegadores exibem imagens dispostas em sites, porm as
imagens possuem formatos especficos, pois no qualquer tipo de arquivo de imagem que deve ser
inserido em uma pgina para WEB.
Os formatos mais aceitos so os arquivos com a extenso: .GIF ou . JPEG (JPG).
O formato GIF (Grafic Interchange Format) suporta no mximo 256 cores e gera imagens com
tamanhos menores. Este formato muito utilizado para desenhos ou grficos, gerando arquivos com a
extenso .GIF.
J o formato JPEG (Joint Photografic Engineering Group) suporte 16 milhes de cores e pode
reduzir o tamanho de uma imagem em at 10 vezes. Este formato muito utilizado para fotos, gerando
arquivos com a extenso .JPEG ou JPG.
Ao utilizar gifs animados, tenha cuidado, pois estes arquivos podem ocupar bastante espao
em disco. O tamanho dos gifs animados depender da quantidade de cores e quadros utilizados para a
animao.
Estes detalhes faro com que sua pgina carregue mais rpido no navegador do usurio,
tornado assim a visitao ao site mais agradvel.
____________________________________________________________ Pgina - 31 -
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.
____________________________________________________________ Pgina - 32 -
7.2 DIMENSIONANDO IMAGENS
Onde:
Widht=n: indica a largura da imagem em pixels.
Height=n : indica a altura da imagem em pixels.
NOTA:
____________________________________________________________ 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:
<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
____________________________________________________________ Pgina - 35 -
Fgura 7.3 Modelo de alinhamento de imagem ao texto
O atriibuto ALT utilizado para exibir uma mensagem quando a imagem est sendo carregada.
Tambm tem a funo de especificar ou indicar a imagem, quando o cursor do mouse colocado sobre ela.
Comando:
Onde:
ALT = mensagem : indica a mensagem que ser exibida quando o cursor do mouse for
colocado sobre a imagem.
____________________________________________________________ Pgina - 36 -
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) Defina os alinhamentos:
a) TOP:
________________________________________________________________________________
______________________________________________________________________________________
_
b) MIDDLE:
_____________________________________________________________________________
______________________________________________________________________________________
_
c) BOTTOM : ___________________________________________________________________________
______________________________________________________________________________________
_
d) LEFT:
_______________________________________________________________________________
e) RIGHT:
______________________________________________________________________________
______________________________________________________________________ Exerccios
Reviso
8 . Tabelas
As tabelas so muito utilizadas na internet hoje em dia, para estruturar o layout das pginas,
para organizar dados, etc.
Em uma tabela podemos inserir textos, imagens, links e outros elementos e ainda podemos
utilizar uma tabela dentro outra tabela.
No primeiro contato, possvel achar difcil a compreenso das tags utilizadas para estruturar
as tabelas, mas com o uso tornar mais fcil a utilizao e a interpretao de possveis falhas que um editor
de HTML qualquer possa gerar.
8.1MARCAES BSICAS
<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>
____________________________________________________________ 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>
____________________________________________________________ Pgina - 40 -
8.3ATRIBUTOS DE CONTROLE DE TABELAS
WIDTH
Este atributo utilizado para alterar a largura da tabela e das clulas em relao ao
navegador. Os valores inseridos podem ser em pixel ou em percentuais, ou seja, este atributo determina a
rea da tela que a tabela ir ocupar.
Comando:
____________________________________________________________ Pgina - 41 -
Fgura 8.3 Modelo de atributo width na tabela
<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:
____________________________________________________________ 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>
<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.
____________________________________________________________ Pgina - 44 -
Fgura 8.6 Modelo de uso do atributo ALIGN
<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
____________________________________________________________ Pgina - 46 -
Fgura 8.7 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.
____________________________________________________________ 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.
____________________________________________________________ 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.
____________________________________________________________ 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.
____________________________________________________________ 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>
____________________________________________________________ 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>
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>.
____________________________________________________________ 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?
______________________________________________________________________ Exerccios
Reviso
9 . CORES
A cor um poderoso aspecto da nossa experincia do mundo, quando bem aplicada, pode
melhorar e muito a mensagem que queremos transmitir. Quando falamos de cores precisamos entender o
que representam para ns e para a outras pessoas.
O efeito das cores nos meios de comunicao tem sido estudado h vrios anos. Cada meio
de comunicao (jornal, revista, televiso, web, etc) representa as cores de maneiras diferentes.
As cores se diferenciam em trs fatores: matiz, saturao (intensidade) e tonalidade
(luminosidade).
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.
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
____________________________________________________________ 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:
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
____________________________________________________________ Pgina - 58 -
10 .TIPOLOGIA
A TIPOLOGIA significa o estudo dos tipos, ou seja, o conjunto de caracteres tipogrficos que
so conhecidos como fontes. Elas admitem algumas variaes tais como itlico, negrito, sublinhado, etc.
Hoje em dia, existem diversos tipos disponveis de fontes. A maior parte dos tipos de fontes,
podem ser classificados em 6 categorias, que so estas:
ESTILO ANTIGO
Moderno
Serifa Grossa
Sem Serifa
Manuscrito
DECORATIVO
Iremos conhecer as similaridades entre os tipos, tornando-o mais conciente quando aos
detalhes e aplicaes das letras.
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.
____________________________________________________________ Pgina - 60 -
Algumas fontes:
Bodoni
Times Bold
Fenice
Ultra
Walbaum
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
______________________________________________________________ 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.
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.
Borracha Como o prprio nome diz, ela apaga trechos que no devem aparecer na imagem.
______________________________________________________________ Pgina - 65 -
Degrad Efeitos de cores nas imagens.
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.
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.
______________________________________________________________ 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.
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.
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.
______________________________________________________________ Pgina - 68 -
13 . SELECIONANDO E MOVENDO IMAGENS
As selees so reas da imagem que voc marcou para fazer alguma alterao, e
so limitadas e especificadas por uma linha pontilhada em torno da regio desejada. Podemos
criar selees utilizando a ferramenta Marca de Seleo, Lao, Varinha Mgica, Corte Demarcado
e Lao, como veremos mais adiante.
______________________________________________________________ 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
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
______________________________________________________________ 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
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.
______________________________________________________________ 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.
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
______________________________________________________________ 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.
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.
______________________________________________________________ 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.
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.
______________________________________________________________ Pgina - 79 -
15.3 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.
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.
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.
______________________________________________________________ Pgina - 83 -
EXERCCIOS PARA REVISO
1. Crie um novo documento com o fundo branco e escreva a palavra que quiser, eu estou
usando a FONT chamada TAG XTREME;
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;
______________________________________________________________ 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
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 . VOCABULRIO UTILIZADO NO PHOTOSHOP
ANTIALIASING Numa imagem do tipo bitmap, a suavizao das bordas dos objetos para que
no fiquem com aspectos serrilhados.
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 . 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
de seu site.
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
para grandes leituras.
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
._____________________________________________________________ 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.
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
._____________________________________________________________ Pgina - 94 -
Para exibi-la ou ocult-la clique no menu EXIBIR e selecione BARRA DE
FERRAMENTAS na opo DOCUMENTO (Document).
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.
._____________________________________________________________ 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.
._____________________________________________________________ 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.
._____________________________________________________________ Pgina - 97 -
22 . INICIANDO UMA PGINA NO DREAMWEAVER
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.
._____________________________________________________________ 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.
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.
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.
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.
Muitas pginas utilizam formulrios para obter informaes das pessoas que esto
visitando sua pgina e solicitando seus servios.
2) Pule uma linha e digite "Contato" e em seguida os dados da empresa (e-mail, telefone,
fax);
3) Em seguida digite: "Se voc tem alguma dvida ou sugesto sobre os nossos produtos,
preencha o formulrio abaixo:";
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;
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.
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
11) Edite o cdigo HTML e no action da tag form coloque o e-mail para onde sero
encaminhados os dados (mailto:xxxxxxxxxxx).
Nome:
E-mail:
Sexo:
Dvidas ou Sugestes:
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
do site.
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?
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.
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.
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.