Você está na página 1de 50

Tribunal Superior do Trabalho

Web Design - Prof. Glauber Freitas 1


Objetivos
 Desenvolver competências para o
domínio das técnicas de utilização dos
aplicativos mais comuns (Dreamweaver
e Photoshop) e também conhecimentos
fundamentais para a programação
visual de Websites.

 Carga horária: 80h

Web Design - Prof. Glauber Freitas 2


Docente: Prof. Glauber
Freitas
 Professor e Instrutor de Informática
 Formado em Sistemas de Informação
 Pós Graduando em Objetos, Sistemas
Distribuídos e Internet – UnB

Contato: glaubox@gmail.com

Web Design - Prof. Glauber Freitas 3


Alunos
 Bem-Vindos
 Quem é Quem

Web Design - Prof. Glauber Freitas 4


O curso...
 Introdução
 HTML
 Dreamweaver
 Photoshop
 Design para Web
 Projeto de Web Site

Web Design - Prof. Glauber Freitas 5


Introdução - HTML

Web Design - Prof. Glauber Freitas 6


A Internet

Web Design - Prof. Glauber Freitas 7


Endereçamento na
Internet
 nome@ domínio
Nome = identificação do usuário
(geralmente o login)
@ = AT, “está localizado”
Domínio = Nome do computador onde
“está localizado” o usuário “nome”

Web Design - Prof. Glauber Freitas 8


Elementos de um Projeto
Web
 Página Web – Arquivo de texto
formatado como HTML
 Home Page – Página pessoal ou inicial
do site.
 Web Site – Sítio, Lugar; conjunto de
páginas HTML, que contém informações
relacionadas. Também podem fazer
parte de um Web Site arquivos de texto,
programas, imagens, etc.

Web Design - Prof. Glauber Freitas 9


Estrutura de um Web
Site
 Um Web Site pode estár organizado de
três maneiras:

○ Sequencial
○ Árvore
○ Mista

Web Design - Prof. Glauber Freitas 10


Estrutura de um Web Site :
Sequencial

Web Design - Prof. Glauber Freitas 11


Estrutura de um Web Site :
Árvore
Home
Page

Web Design - Prof. Glauber Freitas 12


Estrutura de um Web Site :
Mista

Web Design - Prof. Glauber Freitas 13


HTML
 Hypertext Markup Language
 Linguagem ultilizada para criação de páginas
na Web
 Atualmente trabalha em conjunto com outras
tecnologias (JavaScript, CSS), que
proporciona páginas mais interativas.
 Interpretado pelo navegador e exibido da
maneira correspondente

Web Design - Prof. Glauber Freitas 14


Editores WYSIWYG
 What you see is what you get!
 Programas editores que criam o HTML
automaticamente. Ex: Dreamweaver,
Front Page, Composer

 Funcionamento

Web Design - Prof. Glauber Freitas 15


Tags HTML
 Os comandos em HTML são chamados de
tags
 Eles dizem ao navegador como o texto, a
informação e as imagens serão formatadas e
exibidas
 Os Tags são identificados pelos símbolos < >
e </>
 < nome da tag >
.
.
.
</nome da tag>

Web Design - Prof. Glauber Freitas 16


Tags HTML
 Os tags podem ser:
Abertos (simples): <comando> ex. <br>

Fechados: <comando> . . . </comando>

Compostos: <comando>
<elemento 1> ... </elemento 1>
<elemento 2> ... </elemento 2>
...
<elemento n> ... </elemento n>
</comando>

Web Design - Prof. Glauber Freitas 17


Regras e Dicas HTML
 Fechar sempre os tags fechados e
compostos

 NUNCA esquecer um sinal de “<“ ou de


”>” no ínicio ou fim da tag

 Não usar espaço no tag (no interior dos


sinais < e > )
 </ comando> ERRADO!!!
 <com na do> NUNCA!!!

Web Design - Prof. Glauber Freitas 18


Boas Práticas
HTML/Dicas
 Nome dos TAGS – Maiúsculas (não é estritamente
necessário mas facilitada a leitura do código.
 Nome dos arquivos (inclusíve extenção “.html” ou
“.htm”) – Minúsculas.
 Verifique suas págins em diferentes navegadores
para assegurar uma experiencia de visualização
consistente.
 Revise a grafia e gramatica antes de publicar sua
página; Verifique todos os links entre as Páginas

Web Design - Prof. Glauber Freitas 19


Estrutura Básica de uma
Página
<HTML>
<HEAD>
<TITLE> Aula 01 </TITLE>
</HEAD>
<BODY>
Minha primeira página HTML
</BODY>
</HTML>

Web Design - Prof. Glauber Freitas 20


Estrutura Básica de uma
Página
<HTML>
<HEAD>
<TITLE> Aula 01 </TITLE>
</HEAD>
<BODY> Aqui você
coloca seus
Minha primeira página HTML códigos HTML,
Textos,
</BODY> Imagens e
Informações
</HTML>

Web Design - Prof. Glauber Freitas 21


Atributos do Tag
<BODY>
 BGCOLOR; cor de fundo da pagina
 TEXT; cor do texto da pagina
 LINK; cor dos links
 VLINK; cor dos links visitados
 ALINK; cor do link ativo
 BACKGROUND; define uma imagem
como fundo da pagina

Web Design - Prof. Glauber Freitas 22


Tabela de cores RGB

Web Design - Prof. Glauber Freitas 23


Exemplo da tag
<BODY>
<HTML>
<HEAD>
<TITLE> Aula 02 </TITLE>
</HEAD>
<BODY BGCOLOR=“#FFCCCC” TEXT=“#000099”
LINK=”#009900” VLINK=“#FF0000”
ALINK=“#FF99FF”>
Minha segunda página HTML
</BODY>
</HTML>

Web Design - Prof. Glauber Freitas 24


Atributo <BODY
BACKGROUND>
 Atributo “background”
Serve para adicionar uma imagem como plano de
fundo da página HTML.

<BODY background=”imagem_fundo.jpg”>

 BGPROPERTIES= "FIXED” IE users only

<BODY BACKGROUND = "PISO.GIF" BGPROPERTIES= "FIXED ">

Web Design - Prof. Glauber Freitas 25


Títulos/Cabeçalhos
 No corpo do texto podem ser colocados
até seis níveis de títulos.
 A hierarquia começa em <H1>, como o
maior título, e termina em <H6>, como o
menor.

Web Design - Prof. Glauber Freitas 26


Exemplo
Títulos/Cabeçalhos
 <H1> Aqui será Exibido o texto com a cor padrão da página, e no
maior tamanho possível </H1>

 <H2>Aqui será exibido um texto menor...</H2>

 <H3>...aqui será exibido um texto menor...</H3>

 <H4>...aqui será exibido um texto menor...</H4>

 <H5>...aqui será exibido um texto menor...</H5>

 <H6>...E aqui será exibido o menor texto possível com a tag </H6>

Web Design - Prof. Glauber Freitas 27


<CENTER> ...
</CENTER>
 Ultilizea tag <CENTER> quando você
quiser centralizar blocos de texto,
imagens, tabelas etc. dentro da página
exibida.
 Seu uso é muito simples e pode ser
descrito da seguinte forma:

<CENTER><H1> Essa frase aparecerá


centralizada na página. </H1></CENTER>

Web Design - Prof. Glauber Freitas 28


Tag <P>
 A principal diferença entre a página HTML e um editor
de textos tradicional é que a página não reconhece o
fim de um parágrafo com o pressionamento da tecla
Enter. Se você simplesmente escrever palavras sem
TAGS de formatação em um arquivo html elas serão
formatadas em um grande único parágrafo. Você
precisa forçar o fim do parágrafo e a quebra de linha
usando TAGS especiais. O TAG responsável pela
quebra de parágrafos é o TAG <P> . Ele iniciará um
novo parágrafo e pulará uma linha entre o texto.

Web Design - Prof. Glauber Freitas 29


Observação <P>
 Os parágrafos são digitados normalmente. O tag <P>
serve para indicar o início de um novo parágrafo. Se o tag
<P> for colocado antes de um título (<H2>, por exemplo),
a marca de parágrafo é ignorada. Nesse caso, o próprio
título se encarrega de colocar o espaço necessário.

 Atributo align; alinhamento, left – center –


right.
ex: <P align=“center”>

Web Design - Prof. Glauber Freitas 30


Tag <BR>
 Linhas
 Assim como as marcas de parágrafo, as
quebras de linha são indicadas por um
tag simples. Para abrir uma nova linha,
usa-se o tag <BR>.

Web Design - Prof. Glauber Freitas 31


Tag <HR atributos>
 A tag <HR> cria uma linha horizontal no documento.
 Tem função decorativa
 Utilizada normalmente para separar seções de
informação
 Atributos:
 Align; posição (right, left, center).
 Size; espessura da linha em pixels.
 Width;largura da linha em px ou porcentagem em relação a
página.

Ex: <HR ALIGN=CENTER SIZE=2 WIDTH=100%>

Web Design - Prof. Glauber Freitas 32


Listas
 Na linguagem HTML existem elementos
específicos para a criação de listas, que
podem ser listas ordenadas (OL),
listas sem ordenação (UL), ou listas
de definições (DL).
 Podem ser criadas listas aninhadas, ou
seja, listas dentro de listas.

Web Design - Prof. Glauber Freitas 33


Listas Ordenadas <OL>
Ordered Lists

 <OL TYPE=... START=... > </OL>


 Entre os elementos de início e fim, os itens da lista
são definidos pelos elementos <LI> </LI>.
 O atributo opcional TYPE define como será o tipo
de numeração de cada linha. Os tipos disponíveis
são: “A” (A, B, ..., Z), “a” (a, b, ..., z), “I” (i, ii, ..., v),
e “1” (1, 2, ..., 5). Se omitido, é utilizado o tipo
padrão (1, 2, 3, 4).
 O atributo opcional START define a partir de que
elemento a numeração deve se iniciar.

Web Design - Prof. Glauber Freitas 34


Exercício <OL>
<html>
<head>
<title> Listas Ordenadas </title>
</head>
<body>
<h2> Lista ordenada por números </h2>
<ol>
<li> Elemento 1 </li>
<li> Elemento 2 </li>
<li> Elemento 3 </li>
<li> Elemento 4 </li>
</ol>
<h2> Lista ordenada por letras, iniciando em D </h2>
<ol type=''a''” start=4>
<li> Elemento 1 </li>
<li> Elemento 2 </li>
<li> Elemento 3 </li>
<li> Elemento 4 </li>
</ol>
</body>
</html>

Web Design - Prof. Glauber Freitas 35


Listas Não Ordenadas <UL>
Unordered Lists.
 <UL TYPE=...> ... </UL>
 A estrutura das listas sem ordenação é a mesma
das listas ordenadas, sendo que, na
apresentação, os itens serão precedidos por um
marcador (bullet).

 O atributo TYPE pode ser:

 – square: É um quadrado preenchido.


 – circle: É um círculo vazado.
 – disk: É um círculo preenchido .

Web Design - Prof. Glauber Freitas 36


Exercício <UL>
<html>
<head>
<title> Listas Não-Ordenadas </title>
</head>
<body>
<h2> Lista Não-Ordenada </h2>
<ul>
<li> Elemento 1 </li>
<li> Elemento 2 </li>
<li> Elemento 3 </li>
<li> Elemento 4 </li>
</ul>
Código do exercício continua
no slide seguinte...

Web Design - Prof. Glauber Freitas 37


Exercício <UL> continuação...

<h2> Duas listas Não-Ordenadas aninhadas </h2>


<ul type=square>
<li> Elemento 1 </li>
<li> Elemento 2
<ul>
<li> Elemento 2.1 </li>
<li> Elemento 2.2 </li>
<li> Elemento 2.3 </li>
</ul>
</li>
<li> Elemento 3 </li>
<li> Elemento 4 </li>
</ul>
</body>
</html>

Web Design - Prof. Glauber Freitas 38


Lista de Definição
 <DL> ... </DL> - São marcas que englobam uma
lista de definições, ideais para a criação de
glossários e coisas do gênero. A estrutura desta
lista é diferente das outras, pois existem dois
elementos – o termo a ser definido (DT), e a
definição propriamente dita (DD). Na exibição
cada termo aparece em uma linha, e a respectiva
definição na linha seguinte, deslocada para a
direita.

Web Design - Prof. Glauber Freitas 39


Exercício : Lista de
Definição
<html>
<head>
<title> Listas de Definição </title>
</head>
<body>
<h2> Listas de Definição </h2>
<dl>
<dt> HTML </dt>
<dd> HyperText Markup Language </dd>
<dt> OL </dt>
<dd> Listas Ordenadas </dd>
<dt> UL </dt>
<dd> Listas Sem Ordenação </dd>
<dt> LI </dt>
<dd> Elemento da Lista </dd>
</dl>
</body>
</html>

Web Design - Prof. Glauber Freitas 40


Margem
 Outro controle sobre o alinhamento dos elementos da página pode ser
conseguido através da mudança de margem. O texto sempre começa a
uma determinada distância da janela do navegador (um pouco diferente
em cada navegador). Às vezes, será necessário aumentar essa margem e
fazer com que o texto comece mais para dentro da página. O par de tags
<BLOCKQUOTE> e </BLOCKQUOTE> serve para aumentar a margem.
O efeito desse tag pode ser acumulado para conseguir margens maiores.
Veja os exemplos:

 <BLOCKQUOTE>Texto com mais margem</BLOCKQUOTE>

 <BLOCKQUOTE><BLOCKQUOTE>Texto com mais margem


ainda</BLOCKQUOTE></BLOCKQUOTE>

Web Design - Prof. Glauber Freitas 41


Texto Pré-Formatado
<PRE>
 Apresenta o Texto da mesma maneira que foi
digitado
 Com este tag, todos os espaços e entradas de
parágrafo (o resultado da tecla ENTER) são
respeitados.
 Com a Pré-Formatação, pode-se controlar o
espaçamento com abrra de espaço e colocar o
texto em praticamente qualquer lugar da
página
 <PRE> . . . . </PRE>

Web Design - Prof. Glauber Freitas 42


Formatação de Texto
 Todos os TAGS de formatação e estilo de texto devem ter seus tag
de fechamento, pois senão ele se espalhará em toda sua página e
não apenas onde você escolheu.

 Estilos de caracteres
 Os principais estilos de texto são:

Estilo Sintaxe Função


Negrito <B> Texto </B> Deixa o texto em Negrito
Itálio <I> Texto </I> Deixa o texto em Itálio
Sublinhado <U> Texto </U> Deixa o texto Sublinhado

Web Design - Prof. Glauber Freitas 43


Fontes, Tamanhos e Cores
<FONT>
 O Tag <FONT> é ultilizado para produzir a maioria das
modificações em blocos de texto
 <FONT
 FACE =“FONTE1, FONTE2, FONTE3” – Irá defiinir que tipo de
fonte seu texto irá utilizar (ARIAL, TIMES, VERDANA)
 SIZE=“VALOR” – Irá definir qual o tamanho da fonte utilizada. Os
valores inteiros vão de 1 a 7.
 COLOR=“VALOR” – Irá definir qual a cor aplicada na fonte entre
os tag <FONT>

<FONT FACE ="ARIAL" COLOR="RED" SIZE =“5"> Feliz 2008! </FONT>

Web Design - Prof. Glauber Freitas 44


Hyperlinks <A>
 Com o HTML é possível fazer-se
ligações a partir de um bloco de texto ou
imagem à um outro documento e
também ligações entre os elementos do
próprio documento, como áreas ou
seções diferentes no do decorrer do
documento.
 Os Hyperlinks são destacados nos browsers por
cores distintas ou sublinhados. (obs.: Nem sempre)

Web Design - Prof. Glauber Freitas 45


Hyperlinks <A>
 Criação de um hyperlink básico:
<A HREF=url*> âncora* </A>
 url = é o caminho absoluto ou relativo do
documento/arquivo/seção de destino.
 âncora = bloco de texto ou imagem que será ultilizado
como ligação entre o elemento especificado no atributo
HREF e o documento que possui o link. É ela que será
clicada pelo usuário para que o hyperlink passe a funcionar
 Ex:
<A HREF=“http://www.google.com”> Visitar o Google </A>

Web Design - Prof. Glauber Freitas 46


Caminhos Absolutos
 Ultilizama URL completa do documento
que está sendo referenciado pelo link

Web Design - Prof. Glauber Freitas 47


Caminhos Relativos

Web Design - Prof. Glauber Freitas 48


Links para seções de um
documento

Web Design - Prof. Glauber Freitas 49


Especificando um
Destino

Web Design - Prof. Glauber Freitas 50