Escolar Documentos
Profissional Documentos
Cultura Documentos
O smbolo que termina uma determinada etiqueta igual aquele que a inicia, antecedido
por uma barra ( / ) e precedido pelo texto referente.
As etiquetas so necessrias, pois servem para definir a formatao de um bloco de
texto, e assim marcamos onde comea e termina o texto com a formatao especfica
por ela.
<font> PrimeCursos do Brasil </font>
H excesses para a utilizao dos pares de etiquetas. Por exemplo, a que indica um
final de um pargrafo: <p> no necessita de uma correspondente </p> para terminar a
formatao do bloco de texto. A etiqueta que indica quebra de linha <br> tambm no
precisa de etiqueta correspondente, entre outras.
Explicao:
A primeira TAG que encontramos no documento <HTML>. Ela o elemento raiz de um
documento HTML, pois dentro dela est todo o contedo da pgina. Esta tag diz ao
navegador para iniciar um novo documento HTML, onde o contedo que dever ser
exibido esta entre as tags <HTML> e <HTML>.
O texto contido ente as TAG <HEAD> e <HEAD> define o cabealho do documento.
Estas informaes so importantes pois indicam ao navegador a forma que a pgina
deve ser apresentada graficamente.
A tag <TITLE> define o ttulo da pgina. Observe a figura 1.1 o topo do navegador, est
informado Curso de WebDesign.
A tag <BODY> informa ao navegador o que dever ser exibido graficamente. O corpo da
pgina BODY constituido pelo contedo que est entre as tags <BODY> e </BODY>.
2.1.2 CABEALHO
Os cabealhos normalmente so usados para ttulos e sub-ttulos de uma texto da
pgina. A linguagem HTML possui seis nveis de cabealhos, numerados de 1 a 6; quanto
menor o nvel, maior ser o destaque.
Em geral, os cabealhos so exibidos em letras maiores e em negrito, e o HTML adiciona
uma linha em branca antes e depois do cabealhos. O primeiro cabealho de uma
pgina deve ser marcada como <H1>.
COMANDO:
<Hy> Texto do Cabealho </Hy>
Onde o y um nmero que poder ser especificado entre 1 a 6, definindo o nvel do
cabealho.
COMANDO:
<H1>
<H2>
<H3>
<H4>
<H5>
<H6>
Cabealho
Cabealho
Cabealho
Cabealho
Cabealho
Cabealho
nvel
nvel
nvel
nvel
nvel
nvel
2.1.3 PARGRAFO
1
2
3
4
5
5
</H1>
</H2>
</H3>
</H4>
</H5>
</H6>
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>
<html>
<body>
<h1>Utilizando a tag p </h1>
Vamos separar esta linha com a marcao de paragrfo.<p>
Para verificar a diferena.
</body>
</html>
MODELO II
<html>
<body>
<h1>Utilizando a tag br</h1>
Diferena quando separamos duas linhas utilizando<br>
a marcao de quebra de linha<br>
Diferena quando separamos duas linhas utilizando<br>
a marcao de quebra de linha <br>
Verificou a diferena?
</body>
</html>
2.1.5 COMENTRIOS
Os comentrios servem para dizer ao navegador que o contedo apenas anotaes e
que 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 -->
2.1.7 DICAS
-> Quando criamos pginas em HTML devemos ter sempre ateno ao fato delas
poderem ser apresentadas de forma diferente em cada navegadores (browsers) ou em
conmputadores diferentes. O ASPECTO GRFICO PODE DIFERIR ENTRE COMPUTADORES
OU ENTRE NAVEGADORES ! Isso ocorre no s pela diferena entre os sistemas, mas
tambm pelo fato de que os usurios possuem monitores diferentes e podem
redimensionar a janela do navegador para o tamanho que prefirirem.
-> As diferenas nos tamanhos das janelas dos navegadores fazem com que o nmero
de linhas varie muito. Por esse motivo no seremos capazes de controlar nem o nmero
de linhas nem os locais em que acontecem as mudanas de linhas.
-> Sempre que quiser inserir linhas em branco use <br>.
-> J observou alguma vez uma pgina da internet, e se perguntou: Quais as instrues
que foram utilizadas?. Se estiver utilizando o Internet Explorer e quiser descobrir as
instrues, v at o menu Exibir e escolha a opo Cdigo Fonte, ou clique com o boto
direito do mouse e selecione a opo Exibir Cdigo Fonte.
-> No desanime se o aspecto do cdigo fonte lhe aparecer assustador. Se esse for o
caso, pode ter certeza que a pgina que est visualizando foi feita por um programa
especfico. Ao longo do curso, ser possvel verificar que o cdigo HTML bem escrito a
mo muito fcil de ler, mas muitas pessoas complicam o cdigo para confundir.
Formatao de Textos
3.1 DEFININDO 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.
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.
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>
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>
DICAS:
importante ter cuidado ao aplicar elementos de fundo, para no prejudicar a leitura
dos textos.
interessante sempre visitar outras pginas que utilizam este recurso para recolher
boas idias.
Para tornar a visualizao das pginas mais rpidas, alguns usurios no utilizam
imagens em suas pginas, em vez disso utilizam o atributo BGCOLOR.
4.2 CORES DE LETRAS E LINKS
4.2.1 ATRIBUTO TEXT
O atributo TEXT utilizado para controlar a cor do texto normal de uma pgina, ou seja,
define a 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>
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.1 NCORAS
As ncoras so links que utilizamos quando queremos buscar o contedo na mesma
pgina ou em outra pgina qualquer. So muito utilizadas em pginas que tm o
contedo extenso, onde definimos sees na pginas, sendo que cada seo ter um
nome que servir de referncia para o link.
Para criarmos uma ncora selecionamos um local da pgina para inser-la.
<a name=nomedaseo> </a>
Onde:
- <a (h um espao depois do a): a abertura da tag de link;
- name:nome da seo: o nome dado a seo.
- No necessrio inserir nada entre as tags <a> e </a>;
- </a>: utilizada para encerrar a tag.
Com essa tag voc inserir uma imagem ou texto que indicar ao usurio que ao clicar
neste tipo de link, este ir gui-lo at o local onde foi inserida a ncora.
<a href=#Nome da Seo> Texto ou imagem </a>
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.2 INTERLIGANDO DOCUMENTOS EM OUTROS DIRETRIOS
Para interligar documentos em outros diretrios necessrio apenas indicar o caminho
completo da localizao do mesmo.
Quando falamos de WEB, a forma de localizar arquivos diferente do Windows e DOS,
vejamos por que:
- A barra utilizada para separar diretrios a barra convencional ( / );
- O diretrio atual ser sempre o ponto de partida para buscarmos arquivos em outro
diretrio;
- Caso o arquivo esteja localizado em outros nveis de diretrios, utilizamos .. / .
Exemplo:
- Arquivo = o arquivo que deseja ser visualizado, podendo ser um diretrio e o nome do
arquivo.
5.4 LINKS 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.
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
LISTA
LISTA
LISTA
NO NUMERADA;
NUMERADA
DE DEFINIES
INTERCALADAS.
<li> Item 3
</ul>
<ul type="circle">
<li> type = "circle"
<li> Item 1
<li> Item 2
<li> Item 3
</ul>
</body>
</html>
1: Lista numrica
A: Lista alfabtica com letras maisculas;
a: Lista alfabtica com letras minsculas;
I : Lista numrica com nmeros romanos maisculos;
i : Lista numrica com nmeros romanos minsculos.
START=n : indic o valor inicial da lista numerada;
<LI>: indica o tpico da lista.
</OL> indica o fim da lista numerada.
<html>
<head>
<title> Listas numerada </title>
</head>
<body>
<h1> Listas numeradas</h1>
<h3>Lista numerada padro</h3>
<ol>
<li> Item 1
<li> Item 2
<li> Item 3
</ol>
<h3>Lista numerada padro com START="10"</h3>
<ol start="10">
<li> Item 1
<li> Item 2
<li> Item 3
</ol>
<h3>Lista alfabtica com letras maisculas</h3>
<ol type="A">
<li> Item 1
<li> Item 2
<li> Item 3
</ol>
</body>
</html>
</OL>
</UL>
</body>
</html>
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.
NOTA:
- MUITO CUIDADO, ao redimensionar imagens, pois elas podem perder a sua definio,
ficando com o aspecto distorcido.
<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>
<html>
<head>
<title>Redimensionado Imagens</title>
</head>
<body>
<h1>Redimensionamento de Imagens </h1>
<img src="ft01.jpg" alt="A mensagem inserida aqui ser apresentada quando o cursor
do mouse for posicionado sobre a imagem">
</body>
</html>
Tabelas
As tabelas so muito utilizadas na internet hoje em dia, para estruturar o layout das
pginas, para organizar dados, etc.
Em uma tabela podemos inserir textos, imagens, links e outros elementos e ainda
podemos 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.
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>
</tr>
</table>
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:
<html>
<head>
<title>Tabelas</title>
</head>
<body>
<h1>Atributos ALIGN - tag TD e TH</h1><BR>
<table width="300" border="2" align="center">
<tr>
<td align="center">1</td>
<td align="left">2</td>
<td align="right">3</td>
</tr>
<tr>
<tH align="center">Alinhamento CENTER</tH>
<tH align="left">Alinhamento LEFT</tH>
<tH align="right">Alinhamento RIGHT</tH>
</tr>
</table>
</body>
</html>
VALIGN
O atributo VALIGN controla o alinhamento do contedo das clulas em relao a borda
superior e inferior. Pode se utilizado nas tags <TD> <TH>.
O atributo VALIGN aceita as seguintes posies:
- TOP : alinhamento ao topo;
- MIDDLE: alinhamento ao centro;
- BOTTOM: alinhamento ao rodap.
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.
<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.
<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>
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.
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:
DICAS
- Evitar fundos escuros. Fundo preto no recomendado (principalmente em portais de
comunicao), pois h poucas cores que contrastam e causa cansao visual. No caso de
impresso em Preto e Branco, a cor a ser usada para o texto ou imagem pode ser
convertida para o escuro.
- Reduzir o nmero de cores. Muitos designers se esquecem que a maioria dos
monitores apenas conseguem representar, milhares de cores, outros 256 ou 16 cores,
alm dos monitores em Preto e Branco que equipam sistemas comerciais. Para sistemas
comerciais, usar apenas 16 cores, pois ao serem convertidas para o monocromtico, h
padres de cinza suficientes.
- Usar sempre textos com letras pretas. A letra preta, sobre um fundo claro, tem melhor
legibilidade. Podemos dispor de opes para troca da cor de plano de fundo, porm esse
recurso pode no ser bem aceito pela maioria.
- No tornar a tela muito brilhante ou escura, use cores brilhantes em reas pequenas e
cores suaves em reas maiores.
- Tenham em mente que as cores mal utilizadas so piores do que no fazer uso delas.
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 itlicoqi,
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:
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 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.
Algumas fontes:
- Bodoni
- Times Bold
- Fenice
- 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
10.4 SEM SERIFA
Os tipos sem serifa so quase sempre de peso igual, o que significa que 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
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
Ferramentas do Photoshop
Vamos iniciar o uso do PHOTOSHOP para tratamento e edio de imagens para a Web.
Fotos e imagens so fundamentais para o desenvolvimento de um layout, mas uma
imagem ou foto tem que estar num certo padro para ser inserida dentro de uma
pgina da Internet. Com este programa de edio, vamos fazer com que os arquivos
tenham uma tima resoluo e um tamanho de arquivo pequeno, gerando um rpido
acesso a esta imagem.
11.1. INICIANDO O PHOTOSHOP
Para iniciarmos uma edio de imagens no PHOTOSHOP, vamos conhecer primeiro as
ferramentas que ele oferece no menu, conhecer seus nomes e funes para depois
aplicarmos em exemplos cada uma das ferramentas:
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, 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.
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.
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.
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
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.
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.
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.
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.
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.
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.
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.
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.
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.
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 possui 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 possui 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.
Apresentando o Dreamweaver
O DREAMWEAVER MX um editor de HTML profissional para o desenvolvimento de
pginas, sites e aplicativos para a INTERNET que j bastante utilizado no meio dos
desenvolvedores pela facilidade que sua interface apresenta. Ele oferece ferramentas
suficientes para aqueles que gostam de trabalhar em modo texto, como por exemplo, as
dicas de cdigo que so exibidas medida que so digitados os comandos. Tambm
facilita a vida daqueles que no tem afinidade com cdigos HTML, ele possui uma
interface grfica que possibilita a criao de pginas, sites e aplicativos sem a
necessidade de digitao de uma nica linha de cdigo; possuindo painis, guias, menus
e o inspetor de propriedades junto da rea de trabalho, facilita-se a busca de problemas
e se agiliza as definies em geral.
Esta barra contm guias que possuem cones de atalhos para ferramentas bsicas, ou
seja, as mais utilizadas na construo do site. Para exibi-la ou ocult-la clique no menu
JANELA e selecione a opo INSERIR.
Nessa guia h algumas ferramentas bsicas, algumas esto cobertas, pois no iremos
aprofundar muito o contedo das mesmas, outras como (da esquerda para a direita):
HIPERLINK: inserir link;
E-MAIL: link para e-mail;
ANCORA: link para um lugar especfico dentro do prprio documento ou outro
qualquer;
INSERIR TABELA: inseri tabelas;
DESENHAR: desenha camadas;
IMAGEM: insere uma imagem;
IMAGEM ROLLOVER: insere uma imagem que substituda por outra ao passar do
mouse;
MENU DE NAVEGAO: cria um menu com troca de imagens;
LINHA HORIZONTAL: insere linhas horizontais;
DATA: insere datas
COMENTARIOS: insere comentrios
20.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;
Quando voc cria uma nova pgina, a primeira coisa que deve fazer salvar seu
documento. Para criar um novo documento, escolha ARQUIVO (FILE) / NOVO (NEW);
clique na guia geral e escolha a Pgina Bsica na lista de categorias; escolha HTML na
lista da coluna Pgina Bsica e clique no boto criar. Mesmo antes de terminar o seu
documento voc deve salvlo.
Se voc no salvar um documento e inserir objetos grficos no mesmo, estes estaro
num caminho de nome file://. Algumas convenes para salvar um arquivo:
Seu documento poder ter a extenso .htm ou .html, porm Teste.htm diferente de
teste.html.;
Use apenas caracteres alfanumricos (AZ ou az) e nmeros (0 a 9);
Jamais use espaos em nomes de arquivos. Use caracteres de sublinhado ou hfen para
simular um espao, se voc precisar separar palavras.
No use quaisquer caracteres especiais, como >, <, *, / entre outros.
Evite iniciar seus nomes de arquivos com nmeros.
Ao carregar um site, a pgina inicial de suma importncia, pois atravs dela que
podemos abrir um conjunto de pginas relacionadas (site). Para o DREAMWEAVER, a
pgina inicial (home page) dever receber o nome de index.htm ou index.html. Para
cri-la:
Clique com o boto direito do mouse na pasta local do site;
Escolha a opo NOVO ARQUIVO (File/New). adicionada uma nova pgina ao site;
Renomeie para index.htm.
Todo documento HTML que voc cria precisa ter um ttulo. O ttulo usado
principalmente para identificao do documento. Ele apresentado na barra de ttulo do
navegador. Escolha uma frase curta e informativa que descreva o objetivo do
documento.
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.
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.
colunas que deseja inserir e a posio em que elas sero includas. H ainda a opo de
editar uma linha j existente, para dividir:
Selecione a clula, linha ou coluna que pretende dividir e no Inspetor de propriedades
selecione as opes Clula > Divide as clulas em linha ou colunas;
Para mesclar: Selecione as clulas, linhas ou colunas que pretende mesclar e no
Inspetor de propriedades selecione as opes Clula / Linha > Mesclar as clulas
selecionadas utilizando extenses.
Se for necessrio excluir linhas ou colunas, posicione o cursor sobre a linha ou coluna a
ser excluda, clique sobre a rea selecionada com o boto direito do mouse e no menu
de opes que ser exibido escolha as opes Tabela > Deletar Linha / Deletar Coluna.
Links e Navegao
DREAMWEAVER oferece diversos modos de criar links de hipertexto para documentos,
imagens, arquivos de multimdia ou programas dos quais se pode efetuar o download.
Podem ser estabelecidos links com qualquer texto ou imagem em qualquer parte de um
documento, inclusive texto ou imagens localizados em um cabealho, lista, tabela,
camada ou moldura.
Cada pgina da Web tem um endereo nico chamado Universal Resource Locator (URL).
Ao criar links, essencial compreender o caminho de arquivo entre o documento do qual
parte o link e o que est sendo vinculado. Veja alguns tipos de links:
Quando se cria um link preciso definir o caminho entre o documento de onde parte o
link at o que est sendo chamado. Esse caminho pode ser absoluto ou relativo:
Caminho absoluto usado para estabelecer um link a um documento em outro
servidor, preciso fornecer a URL (endereo) completa do documento que est sendo
chamado. Por exemplo http://www.xxx.com.br/treinamentos/index_treinamentos.html.
Caminho relativo usado para criar vnculos locais na maioria dos sites. til para
estabelecer vnculos com documentos situados na mesma pasta ou em outra pasta do
mesmo site, atravs de caminhos de estrutura das pastas. Nesse caso, coloca-se
somente o segmento do caminho, no necessrio especificar a URL.
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).
NOTA: Se a ncora fosse chamada de uma outra pgina, o link ficaria assim:
pagina.html#ancora.
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.
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:
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.
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.
Bibliografia/Links Recomendados
Bibliografia Bsica:
- Webdesign: Teoria e Prtica. Anielle Damasceno, Editora Visual Books.
- 250 Segredos para Web Designers. Molly E. Holzschlag, Editora Campus.
- Projetando Websites. Jakob Nielsen, Editora Campus.
Links:
- http://www.oficinadanet.com.br/artigo/2234/curso_basico_de_webdesign_-_introducao
- http://www.criarweb.com/desenho_web/
- http://www.sobresites.com/webdesign/tutoriais.htm
- http://webtutoriais.com/