Escolar Documentos
Profissional Documentos
Cultura Documentos
Curso Web Designer PDF
Curso Web Designer PDF
Curso
Web Designer
Carga horria: 60hs
Dicas importantes
Nunca se esquea de que o objetivo central aprender o contedo, e no apenas
terminar o curso. Qualquer um termina, s os determinados aprendem!
Leia cada trecho do contedo com ateno redobrada, no se deixando dominar pela
pressa.
Explore profundamente as ilustraes explicativas disponveis, pois saiba que elas
tm uma funo bem mais importante que embelezar o texto, so fundamentais para
exemplificar e melhorar o entendimento sobre o contedo.
Contedo
HTML
1. DEFINIO........................................................................................................
.01
9. CORES...............................................................................................................
9.1 - MATIZ, SATURAO E TONALIDADE................................................
9.2 - SISTEMA DE REPRESENTAO DAS CORES..................................
9.3 - PSICOLOGIA DAS CORES...................................................................
55
55
55
56
10. TIPOLOGIA......................................................................................................
59
..64
.69
.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.........................................
19. SEJA UM BOM WEB DESIGNER..................................................................
..89
91
DREAMWEAVER
20. APRESENTANDO O DREAMWEAVER.........................................................
93
.97
98
103
107
110
. DEFINIO
</etiqueta>
____________________________________________________________
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 -
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 -
O corpo da
pgina BODY constituido pelo contedo que est entre as tags <BODY> e </BODY>.
____________________________________________________________
Pgina - 4 -
____________________________________________________________
Pgina - 5 -
COMANDO:
____________________________________________________________
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 -
____________________________________________________________
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:
<!-- Comentrio da pgina -->
DESCRIO
<html>
<title>
<body>
<p>
<br>
<!--
-- >
____________________________________________________________
Pgina - 9 -
2.1.7 DICAS
____________________________________________________________
Pgina - 10 -
REVISO CPITULO 1 e 2
1) Qual o smbolo que determina o fechamento de uma tag?
______________________________________________________________________ Exerccios
Reviso
. 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:
<FONT SIZE=n FACE=nome COLOR=cor> Texto </font>
Onde:
SIZE: indica o tamanho da fonte que varia de 1 a 7, sendo 3 o valor padro da maioria 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.
3.2 ESTILO DE TEXTOS
O HTML define muitos elementos para formatar textos, como por exemplo escrever em negrito,
itlico ou sublinhado.
ELEMENTO
DESCRIO
<b>
<big>
<em>
<i>
<small>
<strong>
<sub>
<sup>
<blink>
Texto pulsante
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 -
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?
______________________________________________________________________ Exerccios
Reviso
Uma cor ou imagem de fundo bem escolhidos podem melhorar o aspecto da pgina, mas uma
m escolha capaz de causar danos muito graves na legibilidade e no aspecto geral.
A maioria dos browsers permite a utilizao de cores, apenas 256, mas j o suficiente para
criar uma pgina com fundo e textos personalizados.
As cores so compostas por cdigo RGB (red, green, blue). Cada cdigo define a intensidade
do vermelho, do verde e do azul.
4.1CORES E ELEMENTOS GRFICOS DE FUNDO
4.1.1
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 -
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 -
____________________________________________________________
Pgina - 16 -
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>
____________________________________________________________
Pgina - 17 -
4.2.2
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 -
____________________________________________________________
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
. 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:
<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.
____________________________________________________________
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
indicar o caminho
____________________________________________________________
Pgina - 21 -
____________________________________________________________
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.
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?
3) Como fazer links com arquivos que esto em outros diretrios, o que utilizamos?
______________________________________________________________________ Exerccios
Reviso
. 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.
____________________________________________________________
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 -
____________________________________________________________
Pgina - 26 -
____________________________________________________________
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 -
____________________________________________________________
Pgina - 29 -
____________________________________________________________
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
. 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 -
<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 -
____________________________________________________________
Pgina - 33 -
7.3.1
<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 -
____________________________________________________________
Pgina - 35 -
Onde:
ALT = mensagem : indica a mensagem que ser exibida quando o cursor do mouse for
colocado sobre a imagem.
____________________________________________________________
Pgina - 36 -
<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
. 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 -
____________________________________________________________
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 -
em relao ao
navegador. Os valores inseridos podem ser em pixel ou em percentuais, ou seja, este atributo determina a
rea da tela que a tabela ir ocupar.
Comando:
1 MODELO WIDTH na tag <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>
____________________________________________________________
Pgina - 41 -
____________________________________________________________
Pgina - 42 -
____________________________________________________________
Pgina - 43 -
</html>
<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>
____________________________________________________________
Pgina - 44 -
____________________________________________________________
Pgina - 45 -
____________________________________________________________
Pgina - 46 -
____________________________________________________________
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 -
____________________________________________________________
Pgina - 49 -
____________________________________________________________
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 -
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>.
____________________________________________________________
Pgina - 52 -
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
. CORES
A cor um poderoso aspecto da nossa experincia do mundo, quando bem aplicada, pode
melhorar e muito a mensagem que queremos transmitir. Quando falamos de cores precisamos entender o
que representam para ns e para a outras pessoas.
O efeito das cores nos meios de comunicao tem sido estudado h vrios anos. Cada meio
de comunicao (jornal, revista, televiso, web, etc) representa as cores de maneiras diferentes.
As cores se diferenciam em trs fatores: matiz, saturao (intensidade) e tonalidade
(luminosidade).
9.1 MATIZ, SATURAO E TONALIDADE
MATIZ a cor pura dominante, como por exemplo: azul, amarelo, vermelho.
SATURAO OU INTENSIDADE o quanto a cor pura dominante (ou matiz) diluda pela
luz branca e intensidade o quantidade de luz refletida (claro/escuro)
TONALIDADE a qualidade acromtica e representa o brilho relativo, do claro ao escuro, de
uma cor, em relao a uma escala de cinzas que varia do branco ao preto.
CONTRASTE: O contraste a base da distino da forma, tamanho, posio, volume e
aparncia dos objetos. Considerando a cor, o contraste pode ser obtido entre a diferena no matiz e a
tonalidade ou iluminao. O contraste entre as cores pode ser usado para alterar a sensao.
9.2 SISTEMA DE REPRESENTAO DAS CORES
O sistema RGB o padro de cores na web. um sistema cartesiano (x, y, z) onde cada cor
primria (Red, Green e Blue) representa um dos eixos do cubo RGB. o modelo usado em TV e monitores
O modelo CMYK formado pelas cores ciano (Cyan), magenta (Magenta), amarelo (Yellow) e preto (blacK).
utilizado em dispositivos de impresso.
Algumas cores podem ser exibidas nos monitores de vdeo, mas no podem ser impressas, e
algumas cores pode ser impressas, mas no exibidas em monitores. Alm disso, existem cores que
enxergamos que no podem ser presentadas pelo monitores e impressoras.
____________________________________________________________
Pgina - 55 -
CORES
IDADES
SENSAO
VERMELHO
1 a 10 anos
Efervecncia e espontaneidade
LARANJA
10 a 20 anos
AMARELO
20 a 30 anos
VERDE
30 a 40 anos
AZUL
40 a 50 anos
Pensamento Inteligncia
LILS
50 a 60 anos
ROXO
60 anos
____________________________________________________________
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
____________________________________________________________
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.
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 -
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 -
Algumas fontes:
Addled
Extravaganza
Fajita
Scarlett
Party
____________________________________________________________
Pgina - 63 -
11
. FERRAMENTAS
DO PHOTOSHOP
______________________________________________________________ Pgina - 64 -
______________________________________________________________ Pgina - 65 -
2.
______________________________________________________________ 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.
______________________________________________________________ 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.
2.
______________________________________________________________ Pgina - 68 -
13
As selees so reas da imagem que voc marcou para fazer alguma alterao, e
so limitadas e especificadas por uma linha pontilhada em torno da regio desejada. Podemos
criar selees utilizando a ferramenta Marca de Seleo, Lao, Varinha Mgica, Corte Demarcado
e Lao, como veremos mais adiante.
13.1. MARCA DE SELEO
Com as ferramentas de MARCA, selecionamos uma das opes e qual formato
utilizaremos para selecionar a parte da imagem que desejamos trabalhar. Podemos variar
conforme a necessidade, com a ferramenta MARCA, ela oferece opes geomtricas como
retangular e elptica. Selecionada a opo, mantenha pressionado o boto esquerdo do mouse
arrastando sobre a rea da figura que queremos selecionar. Podemos editar esta linha pontilhada
que fica sobre a rea selecionada, mantendo os botes SHIFT ou ALT, aumentando ou diminuindo
a rea de seleo.
______________________________________________________________ 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 -
______________________________________________________________ Pgina - 71 -
______________________________________________________________ Pgina - 72 -
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.
3.
______________________________________________________________ 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 -
______________________________________________________________ Pgina - 75 -
2.
______________________________________________________________ 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.
______________________________________________________________ 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.
______________________________________________________________ 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.
______________________________________________________________ Pgina - 80 -
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.
3.
______________________________________________________________ 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.
______________________________________________________________ Pgina - 82 -
______________________________________________________________ Pgina - 83 -
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 -
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
______________________________________________________________ Pgina - 86 -
______________________________________________________________ Pgina - 87 -
______________________________________________________________ Pgina - 88 -
18
______________________________________________________________ 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
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 -
._____________________________________________________________ Pgina - 94 -
._____________________________________________________________ Pgina - 95 -
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.
2.
3.
._____________________________________________________________ Pgina - 96 -
21
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
._____________________________________________________________ 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 -
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.
1.
2.
Cite algum nmero hexadecimal para as cores que voc ir utilizar na criao de seu
site.
3.
23
LINKS E NAVEGAO
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).
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).
NOTA: Se a ncora fosse chamada de uma outra pgina, o link ficaria assim:
pagina.html#ancora.
24
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,
fax);
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;
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:
25
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?
25.1 - DEFINIR O CONTEDO, O QUE SER DIVULGADO NO 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
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.