Tribunal Superior do Trabalho

Web Design - Prof. Glauber Freitas

Objetivos

Desenvolver competncias para o dom nio das t!cnicas de utili"a#$o dos aplicativos mais comuns %Dream&eaver e Photoshop' e tamb!m conhecimentos fundamentais para a programa#$o visual de Websites. hor)ria* +,h

(arga

Web Design - Prof. Glauber Freitas

Docente: Prof. Glauber Freitas

Professor

e .nstrutor de .nform)tica Formado em Sistemas de .nforma#$o P/s Graduando em 0b1etos2 Sistemas Distribu dos e .nternet 3 4n5 (ontato* glaubo67gmail.com

Web Design - Prof. Glauber Freitas

Alunos
5em-9indos :uem

! :uem

Web Design - Prof. Glauber Freitas

O curso...
.ntrodu#$o <T=> Dream&eaver Photoshop Design

para Web Pro1eto de Web Site

Web Design - Prof. Glauber Freitas

.ntrodu#$o - <T=>

Web Design - Prof. Glauber Freitas

A Internet

Web Design - Prof. Glauber Freitas

Endereamento na Internet
nome@

domnio

Bome C identifica#$o do usu)rio

%geralmente o login' 7 C DT2 Eest) locali"adoF Dom nio C Bome do computador onde Eest) locali"adoF o usu)rio EnomeF

Web Design - Prof. Glauber Freitas

Elementos de um Projeto Web

Pgina

Web 3 DrGuivo de te6to formatado como <T=> Home Page 3 P)gina pessoal ou inicial do site. Web Site 3 S tio2 >ugarH con1unto de p)ginas <T=>2 Gue cont!m informa#Ies relacionadas. Tamb!m podem fa"er parte de um Web Site arGuivos de te6to2 programas2 imagens2 etc.
Web Design - Prof. Glauber Freitas J

Estrutura de um Web Site

4m

Web Site pode est)r organi"ado de trs maneiras*

K SeGuencial K Lrvore K =ista

Web Design - Prof. Glauber Freitas

1,

Estrutura de um Web Site :

Se uencial

Web Design - Prof. Glauber Freitas

11

Estrutura de um Web Site :

!rvore
<ome Page

Web Design - Prof. Glauber Freitas

1-

Estrutura de um Web Site :

"ista

Web Design - Prof. Glauber Freitas

18

#$"%
<Mperte6t =arNup >anguage >inguagem ultili"ada para cria#$o de p)ginas na Web Dtualmente trabalha em con1unto com outras tecnologias %OavaScript2 (SS'2 Gue proporciona p)ginas mais interativas. .nterpretado pelo navegador e e6ibido da maneira correspondente

Web Design - Prof. Glauber Freitas

1;

Editores W&SIW&G
What

Mou see is &hat Mou getP Programas editores Gue criam o <T=> automaticamente. Q6* Dream&eaver2 Front Page2 (omposer
Funcionamento

Web Design - Prof. Glauber Freitas

1?

$a's #$"%
0s comandos em <T=> s$o chamados de tags Qles di"em ao navegador como o te6to2 a informa#$o e as imagens ser$o formatadas e e6ibidas 0s Tags s$o identificados pelos s mbolos R S e RTS

R nome da tag S . . . RTnome da tagS

Web Design - Prof. Glauber Freitas

1@

$a's #$"%

0s tags podem ser*

Abertos (simples): RcomandoS
e6. RbrS

Fechados: RcomandoS . . . RTcomandoS Compostos:

RcomandoS Relemento 1S ... RTelemento 1S Relemento -S ... RTelemento -S ... Relemento nS ... RTelemento nS RTcomandoS
Web Design - Prof. Glauber Freitas 1A

(e'ras e Dicas #$"%

Fechar sempre os tags fechados e compostos esGuecer um sinal de ERE ou de FSF no nicio ou fim da tag usar espa#o no tag %no interior dos sinais R e S '
RT comandoS Rcom na doS

B4B(D

B$o

E A!"### $%$CA###
Web Design - Prof. Glauber Freitas 1+

)oas Pr*ticas #$"%+Dicas

$ome dos &A'S 3 =aiUsculas %n$o ! estritamente necess)rio mas facilitada a leitura do c/digo. $ome dos ar()i*os %inclus ve e6ten#$o E.htmlF ou E.htmF' 3 =inUsculas. 9erifiGue suas p)gins em diferentes navegadores para assegurar uma e6periencia de visuali"a#$o consistente. Vevise a grafia e gramatica antes de publicar sua p)ginaH 9erifiGue todos os linNs entre as P)ginas

Web Design - Prof. Glauber Freitas

1J

Estrutura )*sica de uma P*'ina

R<T=>S
R<QDDS RT.T>QS Dula ,1 RTT.T>QS RT<QDDS R50DWS =inha primeira p)gina <T=> RT50DWS RT<T=>S
Web Design - Prof. Glauber Freitas -,

Estrutura )*sica de uma P*'ina

R<T=>S
R<QDDS RT.T>QS Dula ,1 RTT.T>QS RT<QDDS R50DWS =inha primeira p)gina <T=> RT50DWS RT<T=>S
Web Design - Prof. Glauber Freitas

DGui voc coloca seus c/digos <T=>2 Te6tos2 .magens e .nforma#Ies

-1

Atributos do $a' ,)OD&5G(0>0VH cor de fundo da pagina TQXTH cor do te6to da pagina >.BYH cor dos linNs 9>.BYH cor dos linNs visitados D>.BYH cor do linN ativo 5D(YGV04BDH define uma imagem como fundo da pagina

Web Design - Prof. Glauber Freitas

--

$abela de cores (G)

Web Design - Prof. Glauber Freitas

-8

E.em/lo da ta' ,)OD&R<T=>S R<QDDS RT.T>QS Dula ,- RTT.T>QS RT<QDDS R50DW 5G(0>0VCEZFF((((F TQXTCEZ,,,,JJF >.BYCFZ,,JJ,,F 9>.BYCEZFF,,,,F D>.BYCEZFFJJFFFS =inha segunda p)gina <T=> RT50DWS RT<T=>S

Web Design - Prof. Glauber Freitas

-;

Atributo ,)OD& )A01G(O23D Atrib)to

+bac,gro)nd-

Serve para adicionar uma imagem como plano de fundo da p)gina <T=>. R50DW bac,gro)nd.-imagem/0)ndo12pg-3

5GPV0PQVT.QSC [F.XQDF

.Q users onlM

45"!6 5AC7' "%$! . 8P9S"1'9F8 5'P "PE &9ES. 8F9:E! 83

Web Design - Prof. Glauber Freitas

-?

Ttulos/Cabealhos
Bo

corpo do te6to podem ser colocados at! seis n veis de t tulos. D hierarGuia come#a em R<1S2 como o maior t tulo2 e termina em R<@S2 como o menor.

Web Design - Prof. Glauber Freitas

-@

E.em/lo $4tulos+0abeal5os

4H;3 DGui ser) Q6ibido o te6to com a cor padr$o da p)gina2 e no maior tamanho poss vel 4<H;3 4H=3DGui ser) e6ibido um te6to menor...4<H=3 4H>3...aGui ser) e6ibido um te6to menor...4<H>3 4H?3...aGui ser) e6ibido um te6to menor...4<H?3 4H@3...aGui ser) e6ibido um te6to menor...4<H@3 4HA3...Q aGui ser) e6ibido o menor te6to poss vel com a tag 4<HA3

Web Design - Prof. Glauber Freitas

-A

,0E3$E(- ... ,+0E3$E( 4ltili"e

a tag R(QBTQVS Guando voc Guiser centrali"ar blocos de te6to2 imagens2 tabelas etc. dentro da p)gina e6ibida. Seu uso ! muito simples e pode ser descrito da seguinte forma*
R(QBTQVSR<1S Qssa frase aparecer) centrali"ada na p)gina. RT<1SRT(QBTQVS
Web Design - Prof. Glauber Freitas -+

$a' ,P

D principal diferen#a entre a p)gina <T=> e um editor de te6tos tradicional ! Gue a p)gina n$o reconhece o fim de um par)grafo com o pressionamento da tecla Qnter. Se voc simplesmente escrever palavras sem TDGS de formata#$o em um arGuivo html elas ser$o formatadas em um grande Unico par)grafo. 9oc precisa for#ar o fim do par)grafo e a Guebra de linha usando TDGS especiais1 " &A' respons*el pela ()ebra de pargra0os B o &A' 4P3 1 Ele iniciar )m no*o pargra0o e p)lar )ma linha entre o teCto1

Web Design - Prof. Glauber Freitas

-J

Observa6o ,P

0s par)grafos s$o digitados normalmente. 0 tag RPS serve para indicar o in cio de um novo par)grafo. Se o tag RPS for colocado antes de um t tulo %R<-S2 por e6emplo'2 a marca de par)grafo ! ignorada. Besse caso2 o pr/prio t tulo se encarrega de colocar o espa#o necess)rio.

Dtributo alignH alinhamento2 left 3 center 3 right. e6* RP alignCEcenterFS

Web Design - Prof. Glauber Freitas

8,

$a' ,)( Dinhas Dssim

como as marcas de par)grafo2 as Guebras de linha s$o indicadas por um tag simples. Para abrir uma nova linha2 usa-se o tag R5VS.

Web Design - Prof. Glauber Freitas

81

$a' ,#( atributos

D tag R<VS cria uma linha hori"ontal no documento. Tem fun#$o decorativa 4tili"ada normalmente para separar se#Ies de informa#$o Dtributos*
DlignH posi#$o %right2 left2 center'. Si"eH espessura da linha em pi6els. WidthHlargura da linha em p6 ou porcentagem em rela#$o a

p)gina.

Q6* R<V D>.GBC(QBTQV S.\QC- W.DT<C1,,]S

Web Design - Prof. Glauber Freitas

8-

Listas
Ba

linguagem <T=> e6istem elementos espec ficos para a cria#$o de listas2 Gue podem ser listas ordenadas %"D)E listas sem ordenaFGo (%D)E o) listas de de0iniFHes (!D)1 Podem ser criadas listas aninhadas2 ou se1a2 listas dentro de listas.

Web Design - Prof. Glauber Freitas

88

Listas Ordenadas <OL>

Ordered %ists 4"D

&6PE.111 S&A &.111 3 4<"D3

Qntre os elementos de in cio e fim2 os itens da lista s$o definidos pelos elementos 4D93 4<D931 0 atributo opcional &6PE define como ser) o tipo de numera#$o de cada linha. 0s tipos dispon veis s$o* EDF %D2 52 ...2 \'2 EaF %a2 b2 ...2 "'2 E.F %i2 ii2 ...2 v'2 e E1F %12 -2 ...2 ?'. Se omitido2 ! utili"ado o tipo padr$o %12 -2 82 ;'. 0 atributo opcional S&A & define a partir de Gue elemento a numera#$o deve se iniciar.

Web Design - Prof. Glauber Freitas

8;

E.erc4cio ,O%RhtmlS RheadS RtitleS >istas 0rdenadas RTtitleS RTheadS RbodMS Rh-S >ista ordenada por nUmeros RTh-S RolS RliS Qlemento 1 RTliS RliS Qlemento - RTliS RliS Qlemento 8 RTliS RliS Qlemento ; RTliS RTolS Rh-S >ista ordenada por letras2 iniciando em D RTh-S Rol tMpeC^^a^^F startC;S RliS Qlemento 1 RTliS RliS Qlemento - RTliS RliS Qlemento 8 RTliS RliS Qlemento ; RTliS RTolS RTbodMS RThtmlS

Web Design - Prof. Glauber Freitas

8?

Listas No Ordenadas <UL>

2nordered %ists.

4%D &6PE.1113 111 4<%D3

D estrutura das listas sem ordena#$o ! a mesma das listas ordenadas2 sendo Gue2 na apresenta#$o2 os itens ser$o precedidos por um marcador %bullet'. 0 atributo &6PE pode ser:
3 s()are: I )m ()adrado preenchido1 3 circle: I )m crc)lo *aJado1 3 dis,: I )m crc)lo preenchido

1
8@

Web Design - Prof. Glauber Freitas

E.erc4cio ,2%RhtmlS RheadS RtitleS >istas B$o-0rdenadas RTtitleS RTheadS RbodMS Rh-S >ista B$o-0rdenada RTh-S RulS RliS Qlemento 1 RTliS RliS Qlemento - RTliS RliS Qlemento 8 RTliS RliS Qlemento ; RTliS RTulS

(/digo do e6erc cio continua no slide seguinte...

8A

Web Design - Prof. Glauber Freitas

E.erc4cio ,2%Rh-S Duas listas B$o-0rdenadas aninhadas RTh-S Rul tMpeCsGuareS RliS Qlemento 1 RTliS RliS Qlemento RulS RliS Qlemento -.1 RTliS RliS Qlemento -.- RTliS RliS Qlemento -.8 RTliS RTulS RTliS RliS Qlemento 8 RTliS RliS Qlemento ; RTliS RTulS RTbodMS RThtmlS

continua6o...

Web Design - Prof. Glauber Freitas

8+

Lista de Definio

4!D3 111 4<!D3 - S$o marcas Gue englobam uma lista de defini#Ies2 ideais para a cria#$o de gloss)rios e coisas do gnero. D estrutura desta lista ! diferente das outras2 pois e6istem dois elementos 3 o termo a ser definido %DT'2 e a defini#$o propriamente dita %DD'. Ba e6ibi#$o cada termo aparece em uma linha2 e a respectiva defini#$o na linha seguinte2 deslocada para a direita.

Web Design - Prof. Glauber Freitas

8J

E.erc4cio : %ista de Defini6o

RhtmlS RheadS RtitleS >istas de Defini#$o RTtitleS RTheadS RbodMS Rh-S >istas de Defini#$o RTh-S RdlS RdtS <T=> RTdtS RddS <MperTe6t =arNup >anguage RTddS RdtS 0> RTdtS RddS >istas 0rdenadas RTddS RdtS 4> RTdtS RddS >istas Sem 0rdena#$o RTddS RdtS >. RTdtS RddS Qlemento da >ista RTddS RTdlS RTbodMS RThtmlS

Web Design - Prof. Glauber Freitas

;,

"ar'em

0utro controle sobre o alinhamento dos elementos da p)gina pode ser conseguido atrav!s da mudan#a de margem. 0 te6to sempre come#a a uma determinada dist_ncia da 1anela do navegador %um pouco diferente em cada navegador'. `s ve"es2 ser) necess)rio aumentar essa margem e fa"er com Gue o te6to comece mais para dentro da p)gina. 0 par de tags R5>0(Y:40TQS e RT5>0(Y:40TQS serve para aumentar a margem. 0 efeito desse tag pode ser acumulado para conseguir margens maiores. 9e1a os e6emplos* R5>0(Y:40TQSTe6to com mais margemRT5>0(Y:40TQS R5>0(Y:40TQSR5>0(Y:40TQSTe6to com mais margem aindaRT5>0(Y:40TQSRT5>0(Y:40TQS

Web Design - Prof. Glauber Freitas

;1

$e.to Pr78Formatado ,P(E

Dpresenta o Te6to da mesma maneira Gue foi digitado (om este tag2 todos os espa#os e entradas de par)grafo %o resultado da tecla QBTQV' s$o respeitados. (om a Pr!-Formata#$o2 pode-se controlar o espa#amento com abrra de espa#o e colocar o te6to em praticamente GualGuer lugar da p)gina

4P E3 . . . . 4<P E3
Web Design - Prof. Glauber Freitas ;-

Formata6o de $e.to

Todos os TDGS de formata#$o e estilo de te6to devem ter seus tag de fechamento2 pois sen$o ele se espalhar) em toda sua p)gina e n$o apenas onde voc escolheu.

Estilos de caracteres
0s principais estilos de te6to s$o*

Estilo Begrito .t)lio Sublinhado

SintaCe R5S Te6to RT5S R.S Te6to RT.S R4S Te6to RT4S

F)nFGo Dei6a o te6to em Begrito Dei6a o te6to em .t)lio Dei6a o te6to Sublinhado

Web Design - Prof. Glauber Freitas

;8

Fontes9 $aman5os e 0ores <FONT>

0 Tag RF0BTS ! ultili"ado para produ"ir a maioria das modifica#Ies em blocos de te6to
4F"$& FACE CEF0BTQ12 F0BTQ-2 F0BTQ8F 3 .r) defiinir Gue tipo de fonte seu te6to ir) utili"ar %DV.D>2 T.=QS2 9QVDDBD' S9KECE9D>0VF 3 .r) definir Gual o tamanho da fonte utili"ada. 0s valores inteiros v$o de 1 a A. C"D" CE9D>0VF 3 .r) definir Gual a cor aplicada na fonte entre os tag RF0BTS

RF0BT FD(Q C[DV.D>[ (0>0VC[VQD[ S.\Q CE?[S Feli" -,,+P RTF0BTS

Web Design - Prof. Glauber Freitas

;;

#:/erlin;s ,A

(om o <T=> ! poss vel fa"er-se liga#Ies a partir de um bloco de te6to ou imagem a um outro documento e tamb!m liga#Ies entre os elementos do pr/prio documento2 como )reas ou se#Ies diferentes no do decorrer do documento.
0s <MperlinNs s$o destacados nos bro&sers por cores distintas ou sublinhados. %obs.* Bem sempre'

Web Design - Prof. Glauber Freitas

;?

#:/erlin;s ,A

(ria#$o de um hMperlinN b)sico* RD <VQFCurlbS _ncorab RTDS

)rl

C ! o caminho absol)to ou relati*o do documentoTarGuivoTse#$o de destino. Lncora C bloco de te6to ou imagem Gue ser) ultili"ado como liga#$o entre o elemento especificado no atributo <VQF e o documento Gue possui o linN. c ela Gue ser) clicada pelo usu)rio para Gue o hMperlinN passe a funcionar

Q6*
RD <VQFCEhttp*TT&&&.google.comFS 9isitar o Google RTDS

Web Design - Prof. Glauber Freitas

;@

0amin5os Absolutos
4ltili"am

a 4V> completa do documento Gue est) sendo referenciado pelo linN

Web Design - Prof. Glauber Freitas

;A

0amin5os (elativos

Web Design - Prof. Glauber Freitas

;+

%in;s /ara se<es de um documento

Web Design - Prof. Glauber Freitas

;J

Es/ecificando um Destino

Web Design - Prof. Glauber Freitas

?,