Web Design Bsico

1
 Autor(a): Moacir Emdio dos Santos Junior.
1 Edio 2011

Web Design Bsico

Todos os direitos desta edio so reservados a Cresa Brasil Editora S/A.

proibida a reproduo total ou parcial por quaisquer meios, sem autorizao escrita da Editora.

ISBN: 978-85-65110-72-3

_______________________________________________________________________________________________

Cresa Brasil Editora S/A

Rua Jaime Santos, 530 Jardim Aeroporto - Alfenas/MG CEP 37130.000

Atendimento: 0800 722 0226
www.crescabrasil.com.br
sac@crescabrasil.com.br

2
Sumrio
Apresentao.....................................................................................5

Captulo 1- Photoshop como Ferramenta de Design

1.1 Definindo o Fundo do nosso Layout ....................................................6

1.2 Definindo o Menu com Photoshop .....................................................13
1.3 Logo no Photoshop ............................................................................15
1.4 Trabalhando com os Menus de seu Projeto ......................................18
1.5 Fundo dos Containers ........................................................................20
1.6 Header nos Containers ......................................................................23
1.7 Melhorando seus Cabealhos ............................................................25
1.8 Trabalhando com Textos na Pgina ...................................................27

Captulo 2 Fatiando Layout no Fireworks

2.1 Apagando o Menu Superior e o Hover do Menu ................................30

2.2 Exportando o Arquivo no Formato PNG .............................................30
2.3 Abrindo o Arquivo no Fireworks ..........................................................31
2.4 Fatiando o Fundo ................................................................................32
2.5 Repeat Region para o Fundo Fatiado ................................................33
2.6 Fatiando o Rodap .............................................................................34
2.7 Fatiando nossa Logo ..........................................................................35
2.8 Fatiando a rea do Menu ...................................................................35
2.9 Fatiando os Cabealhos ....................................................................36
2.10 Fatiando e Selecionando os Textos ...................................................37
2.11 Fatiando Genricos de Imagens ........................................................37
2.12 Fatiando a rea da Privacidade ........................................................38
2.13 Exportando as Fatias atravs do Fireworks ......................................39

Captulo 3 Formatando o HTML com Uso das Folhas de Estilo

3.1 Abrindo o Dreamweaver e Definindo Configuraes do Site ............44

3.2 Abrindo nosso HTML no Dreamweaver ............................................45
3.3 Criando o arquivo CSS ......................................................................46
3.4 Definindo um Estilo para o Corpo da Pgina .....................................47
3.5 Definindo um Estilo para a rea da Logo ..........................................49
3.6 Definindo um Estilo para a rea do Menu .........................................50
3.7 Definindo as Headers dos Cabealhos .............................................50
3.8 Aplicando Estilos nos Contedos dos Cabealhos ...........................51
3.9 Aplicando Estilos na rea da Privacidade .........................................52
3.10 Texto para nossos Cabealhos .........................................................53
3.11 Formatando o Texto do Rodap ........................................................54

3
 3.12 Formatando os Texto para o Menu ......................................................55
3.13 Formatando o Texto para o Contedo do Cabealho ...........................55
3.14 Definindo Od links e Criando Hover para o Menu .................................56
3.15 Duplicando as Imagens para o Contedo .............................................57

Captulo 4 Criando Banners Atravs do Flash

4.1 Abrindo o Adobe Flash e Definindo o Tamanho do Palco ....................59

4.2 Importando Imagem para o Fundo do Banner ......................................60
4.3 Separando as Imagens em Layers Diferentes ......................................62
4.4 Alinhando o Fundo e Trancando a Layer ..............................................63
4.5 Criando uma Interpolao de Movimento para a Imagem da Vela .......64
4.6 Alterando o Alpha para o nosso Motion ................................................65
4.7 Definindo Textos para o Banner ............................................................66
4.8 Animando o Texto .................................................................................67
4.9 Salvando o Banner e Exportando o SWF .............................................68
4.10 Inserindo o Banner no nosso Layout ....................................................70

4
Apresentao
Seja bem-vindo (a) ao livro de Web Design Bsico.
Este livro mostrar a voc como desenvolver um layout simples a partir
de softwares com: Fireworks, Photoshop, Dreamweaver e Flash. Abordar os
mais diversos conceitos para que voc possa trabalhar como desenvolvedor de
interfaces de forma eficaz.
Espero que aproveite ao mximo o contedo apresentado.
Lembro que este livro destinado a alunos que possuam um
conhecimento bsico sobre HTML, e Photoshop, assim como a pessoas
entusiastas, que pretendam tornar-se designer profissional.
Desejo-lhe um bom aprendizado!

5
Captulo 1
Photoshop como Ferramenta de
Design
Este captulo tem o propsito de apresentar a voc os conceitos
necessrios para a criao do Layout atravs do Photoshop.
Aplicaremos as definies de tamanho e fundo do Layout, os efeitos de
gradiente e mscaras, aprenderemos a trabalhar com mesclagem de clulas e
com textos, conceitos muito utilizados pela maioria dos Web Designers.
Lembre-se que para realizao dos exerccios desse captulo, necessrio que
voc tenha o Adobe Photoshop instalado em seu computador.

1.1 Definindo o Fundo do nosso Layout

1.1.1 Definindo Fundo e Criando Layers

Agora aprenderemos a definir padres de fundo e tamanhos para o

nosso layout, atravs do menu Iniciar, no programas Adobe Master Collection.
Clique em Adobe Photoshop no canto inferior esquerdo do seu
Computador.

6
 J com o Photoshop aberto, clique em File, New; na caixa de dilogo
digite layout1 no campo name; defina uma largura de 800px no campo width
e altura de 740px no campo Heigth.

Vamos criar uma nova Layer que servir como fundo do nosso Layout,
na janela Layer, clique sobre o smbolo do quadradinho no canto inferior direito
da tela.
Pronto uma nova Layer ser adicionada.

Com o mouse sobre a nova Layer clique com o boto direito e escolha a
opo Layer Properties, a janela de propriedades ser aberta. Agora renomeie
a Layer como fundo no campo name.
7
 Caso a Janela de Layers no esteja aberta no Photoshop clique em
Window -> Layer, ou ento pressione F7.

1.1.2 Definindo Cor de Fundo e Gradientes

Agora, com o auxlio da ferramenta retngulo, desenhe um retngulo do

tamanho da tela. Clique com o boto direito sobre a camada e escolha a opo
Blending Options, selecione a opo Gradiente Overlay.
Pronto! Definimos um gradiente para o fundo do layout com tons de
cinza

8
 Atravs da janela Colors, defina um tom de cinza para o cinza escuro de
Layout e consiga um efeito de gradiente.

Caso a Janela de Colors no esteja aberta no Photoshop, clique em

Window -> Color, ou ento, pressione F6. Podemos acessar a ferramenta
retngulo a partir da janela Window -> Tools.

9
1.1.3 Containers para o Contedo da Pgina

Crie uma nova Layer e renomeie com o nome de container. Com o

auxlio da ferramenta retngulo defina uma rea que servir para o contedo
da pgina com uma distncia de mais ou menos 60px para as margens do
fundo.

Atravs da Blending Options >> Gradient Overlay defina um gradiente de

ngulo - 90 graus e com isso defina um efeito de gradiente oposto ao fundo do
layout.

10
1.1.4 Largura da Borda e Sombreamento

Na opo Blending Options, tambm, podemos definir uma largura para

a borda do retngulo. Clique com o boto direito sobre a Layer Container e
escolha a opo Blending Options => Stroke. Escolheremos a espessura da
Linha da borda que definiremos como 3px.
No posicionamento do gradiente dentro da linha definimos como ngulo
de - 93 e pronto.

Na opo gradiente, habilitaremos a opo metais e escolheremos a

opo do terceiro quadro para o efeito de metal, agora, aplicado sobre a borda
do container da nossa pgina.

11
 Tambm sobre a janela Properties da Layer Container habilitaremos a
opo Drop Shadow e observaremos a aplicao de um leve sombreamento
sobre o retngulo que acabamos de criar.

12
1.2 Definindo o Menu com Photoshop

1.2.1 Definindo Cor de Fundo e Gradientes do nosso Menu

Agora, novamente, vamos criar uma nova Layer e renome-la com o

nome de menu fundo. Desenhe um retngulo sobre o topo da pgina, escolha
novamente a opo Blending Options e selecione Gradient Overlay.
Pronto! Agora definiremos um efeito gradiente para o menu de nosso
Layout.
Sobre a janela Gradient Editors adicione trs caixas para o efeito do
gradiente e defina da seguinte forma: tonalidade do verde mdio para a
primeira caixa, tonalidade um pouco mais forte para a segunda e, sobre a
ltima, tonalidade mais fraca. Ajuste a distncia do gradiente e aplique um
efeito bastante interessante.

1.2.2 Retirando a Borda do nosso Menu

Agora, novamente, atravs da opo Blending >> Stroke, zeramos a

opacidade da borda atravs da palheta Opacity, e retiramos completamente a
opacidade da borda deixando-a completamente sem borda.

13
 Com a ajuda da nossa janela de Layers, novamente criamos mais uma
Layer e a renomearemos linha fundo, que ser uma borda da parte inferior do
nosso Menu.

Com o auxlio da ferramenta Tools >> Seleo, fazemos uma linha do

tamanho de um contorno e aplicamos um gradiente com a ajuda do menu de
gradiente que se encontra abaixo do menu File do nosso Photoshop.

14
1.3 Logo no Photoshop

1.3.1 Definindo Cor de Fundo e Gradientes da nossa Logo

Agora, vamos aprender a fazer a logo do nosso Layout, primeiramente,

criamos uma nova Layer e a renomeamos com o nome de logo. Pronto!
Agora, atravs do menu Tools, selecione a ferramenta retngulo e
desenhe um retngulo posicionando-o no lado esquerdo do nosso menu.

Agora, vamos aplicar um novo estilo de background e gradientes para nossa

logo, j que essa foi preenchida com os padres de estilo usados
anteriormente.

15
 Primeiramente, aplicaremos uma borda de espessura de 5px, atravs da
opo Blending >> Stroke como vimos anteriormente, e ajustaremos o
gradiente para um tom cinza e efeito metlico conforme utilizamos na borda de
nosso Container, no se esquea de aplicar um leve sombreamento interno
com a opo Drop Shadow, conseguindo assim um efeito bastante interessante
para o retngulo da nossa futura Logo.

1.3.2 Brilho Interno na nossa Logo

Prosseguindo com a nossa Logo, agora, vamos aplicar um brilho interno

sobre a circunferncia atravs da opo Blending Options >> InnerBlow, defina
um Blend Mode: do tipo Screen, uma Opacidade de 75%, e uma cor branca.
Na janela Color Picker marque a opo Only Web Colors e escolha a cor
branca. Sobre a mesma janela no se esquea de ajustar o size para 9px.

16
1.3.3 Usando a Ferramenta Texto

Agora, com a utilizao da ferramenta Texto, inseriremos o texto da logo da

seguinte forma:
V at a ferramenta de texto, que fica localizada atravs da janela Tools >>
Texto situada abaixo da ferramenta Pincel, tendo forma de uma letra T. Digite
CB. Antes de prosseguir, verifique se a fonte utilizada Haettenschweiler, que
uma fonte nativa do Photoshop. Defina um tamanho de 150px no campo
abaixo do menu Analysis.
No se esquea de aplicar um drop shadow e um gradiente para deixarmos
nossa logo mais bonita.

Caso o texto no esteja visvel, arraste a camada criada na janela de Layers

uma camada acima das camadas criadas at o momento.

1.3.4 Redimensionando o Texto da Logo e Definindo uma

borda

Agora, d um duplo clique sobre a camada criada para o texto. Pressione

CTRL + T. Com a tecla Shift pressionada aumente o tamanho do texto e
posicione o mesmo sobre o interior do crculo.
Pronto, est criado a nossa logo.
Caso seja de seu interesse, aplique um efeito de borda e sombreamento
sobre o texto conforme vimos anteriormente.

17
1.4 Trabalhando com os Menus de seu Projeto

1.4.1 Menu a partir da Ferramenta Texto

Agora, o prximo passo comearmos a trabalhar com o nosso Menu.

Primeiro, desenhe um retngulo e posicione-o logo abaixo da nossa Logo, de
modo que fique abaixo da nossa linha_fundo. Duplique a camada Linha_fundo
e renomeia como Linha_fundo2.
Feito a primeira etapa, selecione a ferramenta Texto como j foi visto
anteriormente.
Selecione a fonte Tahoma, com tamanho 18pt, Font Weigth, estilo Bold,
(Localizado abaixo do menu Select no Photoshop) digite os seguintes textos
para nosso Menu, HOME. Pressione duas vezes a tecla TAB para o
espaamento do menu, logo aps, digite MARKENTING. Agora, pressione
novamente a tecla TAB vrias vezes e digite CURSOS; da mesma forma,
com auxlio da tecla TAB alinhe o ltimo texto e digite CONTATOS.

18
1.4.2 Definindo Cores e Hover para o Texto do nosso
Menu

Depois de inserido o texto para o nosso Menu, hora de definirmos as

cores e o hover para o menu.
Selecione o texto e com o auxlio da aba de cores escolha a cor branca.

Agora, o momento de definirmos o hover, que um efeito muito

utilizado por Web Designers quando se diz respeito a menus Web.
Primeiro, selecione a ferramenta Rounded Rectangle Tool, que est
localizada abaixo da ferramenta PATH SELECTION TOOL e desenhe um
retngulo que tenha por definio os cantos arredondados. Posicione a Layer
criada, logo abaixo da Layer do Menu e modifique a cor desse retngulo para
um tom cinza com opacidade de 44%, posicione este retngulo em cima da
palavra HOME. Pronto est definido o nosso Menu hover.

19
1.4.3 Duplicando o Menu e Criando o Rodap

Agora, vamos duplicar o menu criando assim o nosso rodap. Primeiro

de um clique, com o boto direito sobre a camada do nosso Menu. Selecione a
opo Duplicate Layer, a janela Duplicate Layer ser aberta, no campo AS
digite rodap.
Pronto! Agora, com a ajuda do mouse, clique sobre a camada do rodap
e arraste o texto para a parte inferior do Menu - observe que o texto uma
cpia do menu feito anteriormente.
Feito isso, digite aps a palavra MARKENTING o texto
PRIVACIDADE e defina uma font Weigth como regular. Pronto! No se
esquea de posicionar os textos e ajustar a distncia entre eles.

1.5 Fundo dos Containers

1.5.1 Centralizando os Objetos

Primeiramente, atravs do menu acima, selecione a opo Auto Select,

situada logo abaixo do menu Edit do Photoshop.
Agora, clique na Layer logo e com o CTRL pressionado, selecione a
camada CB e observe que as duas camadas foram selecionadas. Agora,
clique na ferramenta Align Horizontal Centers, logo abaixo do menu e observe
que o texto ficar centralizado ao centro do nosso menu.

20
1.5.2 Criando os Containers

Primeiramente, com o auxlio da ferramenta retngulo, desenhamos um

retngulo e o posicionamos no canto esquerdo da tela. Definimos uma cor
cinza mdio para o fundo desse retngulo e uma borda de 1px na cor cinza
mais claro, no se esquea de renomear esta Layer como Container.

1.5.3 Duplicando os objetos

Com o mouse posicionado sobre a camada criada anteriormente, clique

com o boto direito e escolha a opo Duplicate Layer.

21
 Pronto! Agora, com a ajuda do mouse clique sobre o retngulo, segure o
boto Esquerdo do mouse e arraste a cpia do retngulo para o lado direito da
tela, ou se preferir, arraste o com o auxlio das Teclas Direcionais do teclado.

1.5.4 Delimitando os Containers

A partir da janela de Layers, selecione as duas Layers criadas com a
ajuda da Tecla CTRL do teclado; pressione CTRL + T, criando assim uma caixa
delimitadora para os dois objetos em questo.
Com o mouse posicionado sobre o quadradinho do nosso delimitador
reduza o tamanho dos dois objetos, selecione a ferramenta Move Tool
posicionada na parte superior da janela Tools e clique na opo APPLY na
caixa que se abrir no centro da tela do Photoshop.

22
1.5.5 Mesclando os Objetos

Agora, selecione as duas Layers criadas e pressione CTRL + E, ou

clique com o boto direito e escolha a opo MERGE Layers. Mesclando assim
os objetos, como voc pode observar agora, os objetos esto posicionados na
mesma camada.

1.6 Header nos Containers

1.6.1 rea do Cabealho e Backgrounds

Definiremos agora os cabealhos estilizados para os nossos Containers

criados anteriormente. Novamente com o auxlio da ferramenta retngulo,
desenhamos um retngulo e definimos um gradiente com tons de cinza mais
escuros para destacar sobre o outro objeto.
Para esse objeto, retire toda a borda como j vimos anteriormente e
renomeie a Layer como Headers.

23
1.6.2 Duplicando os Cabealhos

Agora, duplicaremos a Layer criada, clicando, com o boto direito sobre a

Layer, escolhendo a opo Duplicate Layer e posicionando novamente a cpia
sobre a container da direita.

Pronto! Agora mesclaremos os dois cabealhos posicionados acima,

selecionando as duas Layers correspondentes aos dois cabealhos da parte
superior com o mouse sobre uma das duas Layers selecionadas e
selecionando MERGE LAYERS ou CTRL + E no teclado clicando com o boto
direito.

24
1.7 Melhorando seus Cabealhos

1.7.1 Inserindo Ticks nos Cabealhos

Prossiga! Com ajuda da ferramenta retngulo, clique sobre a ferramenta e

no menu posicionado na parte superior do Photoshop selecione a ferramenta
Custom Shape Tool. Agora na janela Shape, selecione o Checkmark
.

25
 Com o boto esquerdo do mouse pressionado desenhe o objeto sobre o
canto esquerdo do primeiro cabealho posicionado acima. Observe que um
Shape ser criado na janela de Layers, renomeie tick. Como vimos,
anteriormente, com a ajuda do Gradient Overlay, d uma cor verde escuro para
o branco. Em seguida, duplique essa Layer posicionando-a de forma
correspondente em cada cabealho. Se for preciso, utilize a mesclagem para a
simplificao de seu servio, conforme vimos anteriormente.

1.7.2 Inserindo Textos nos Cabealhos

Conforme vimos anteriormente, com o auxilio da ferramenta Texto vamos

inserir os textos nos cabealhos.
D um clique sobre a ferramenta Texto e defina uma fonte do tipo
Tahoma, tamanho 14px e font Wheigth do tipo bold. Primeiro digite
Constitucional e posicione sobre o primeiro cabealho, depois digite Fotos e
posicione sobre o cabealho direito.

26
1.8 Trabalhando com Textos na Pgina

1.8.1 Copiando Textos Genricos com Ajuda da Web

Primeiramente, acesse o site Google atravs do endereo

www.google.com.br e pesquise o termo lorem, selecionando a primeira opo
exibida. Pronto, esse o site da Lorem ipsum, esse site corresponde a um site
de textos genricos voltados especialmente para montagem de layouts.
Com o site aberto, selecione o primeiro pargrafo at a palavra book e
copie o texto pressionando a Tecla CTRL + C.
De volta ao Photoshop, com ajuda da ferramenta de texto, desenhe uma
caixa de texto do tamanho da Container e cole o texto pressionando CTRL + V.
Defina uma fonte Arial com fonte size de 15px e fonte wheigth do tipo
regular, duplique esta Layer criada, e, com a ajuda das teclas de direo,
posicione a cpia sobre o Container da direita.
Com o texto selecionado, pressione CTRL + T e uma janela ser aberta
no canto direito do Photoshop, essa janela possibilitar alteraes no texto,
selecione algumas opes e observe as alteraes.

1.8.2 Genrica das Imagens

Est quase concludo o nosso Layout.

Com ajuda da ferramenta retngulo, desenhe um retngulo e
posicionando-o sobre a Container esquerda. Defina uma borda de 1px com
efeito metalizado. Com o auxlio da ferramenta texto, defina uma fonte do Tipo

27
Tahoma, com uma fonte Size de 15px e digite IMAGEM com fonte
maiscula.
Como vimos anteriormente, mescle as duas Layers criadas e crie duas
cpias com a funo Duplicate Layers; mescle as trs copias e novamente
duplique-as.
Pronto agora com as duas Layers criadas, defina uma opacidade de
63%, alcanando assim um tom mais leve para a genrica de imagens.

1.8.3 Definindo a rea da Privacidade

Agora, definiremos a rea do banner. Com ajuda da ferramenta

retngulo definimos um retngulo, que ser a rea da privacidade.
Com a mesma tcnica utilizada anteriormente, desenharemos um
header, um texto Privacidade e um tick para essa rea.
No se esquea de inserir um texto genrico com a ajuda do site Lorem,
neste caso, insira um texto maior, j que nosso container de privacidade
maior que os do cabealho.

28
1.8.4 Salvando nosso Layout como PSD

Atravs do menu >> File >> Save As, defina um formato para o arquivo.
Na aba Format defina o arquivo como PSD,*,PDD.
Na aba Nome, digite o Layout e Na aba Salvar em, na parte superior da
janela, escolha o caminho de preferncia onde ser salvo o seu arquivo, crie
uma pasta para o curso e salve o dentro dessa pasta.

hora de recapitular!

Atravs deste captulo, tivemos uma viso geral de alguns recursos

possveis por meio do Photoshop para que nos tornemos futuros webdesigners.
Utilize toda sua criatividade para construo de outros Layouts, o que
aprimorar cada vez mais seus conhecimentos.
Convido-o a continuar os estudos no captulo 2, onde discutiremos os
conceitos do SEO, uma forma de recortar e exportar seus Layouts atravs do
Fireworks, deixando-o pronto para as folhas de estilo.

29
Captulo 2
Fatiando Layout no Fireworks
Neste captulo aprenderemos como fatiar um Layout no Fireworks,
seguindo as regras de SEO.
Portanto, convido-lhe a ficar atento (a) com cada detalhe!
Lembre-se que para realizao dos exerccios desse captulo,
necessrio que voc tenha o Adobe Fireworks instalado em seu computador.

2.1 Apagando o Menu Superior e o Hover do Menu

Ainda com o Layout aberto no Photoshop, apague o menu superior e o

Hover do Menu, j que sero criados via cdigos atravs do DreamWeaver
posteriormente.

2.2 Exportando o Arquivo no Formato PNG

Agora, para que possamos abrir o nosso arquivo no fireworks, ainda com
o Photoshop aberto, atravs do menu File >> Save As, salve uma cpia do
Layout, mas, ao invs do formato PSD, escolha o formato PNG, ou se for de
sua preferncia, o formato JPG.

30
 Para o campo Nome podemos manter o mesmo nome salvo
anteriormente, que Layout. Clique em Salvar e pronto.

2.3 Abrindo o Arquivo no Fireworks

Agora da mesma maneira que abrimos o Photoshop, abriremos a nossa

sute Fireworks. Atravs do menu do seu Windows clique em Iniciar >>
Programas >> Adobe Master Collection CS4 >> Adobe Fireworks CS4.

J com o Fireworks aberto clique no menu File >> Open, escolha o

arquivo Layout, salvo anteriormente, e clique em abrir.

31
2.4 Fatiando o Fundo

Primeiro selecione a ferramenta Slice Tool

32
 No canto esquerdo do Fireworks desenhe um retngulo, que possua a
altura total do fundo do nosso Layout, com uma espessura de 1px, essa
imagem ser repetida atravs do CSS no Dreamweaver, criando assim um
HTML leve, o que carregar a pgina facilmente e com tamanho de poucos
Kbytes para as imagens.
Para definir espessura de 1px, v at a janela de Propertiers na parte
inferior do Fireworks e no campo width defina 1px, para sua largura, no campo
Heigth defina a altura total do Layout.

2.5 Repeat Region para o Fundo Fatiado

Ainda com a ferramenta Slice selecionada, desenhe dois retngulos nos

dois cantos do nosso Laytout, e defina-os como fundo HTML.
Para definio do fundo como HTML, v janela de propriedades no
campo Type e selecione HTML.

33
 Da mesma maneira faa com o topo. Com a ferramenta Slice desenhe
um retngulo de 1px, que nesse caso ser a parte que se repetir. No restante
do topo crie um retngulo e definindo-o como HTML.

2.6 Fatiando o Rodap

Novamente selecionaremos a ferramenta Slice e desenharemos um

retngulo na parte inferior do rodap e outro acima do menu do rodap.
Com esta ferramenta selecionamos todo o nosso menu inferior e
desenharemos retngulos sobre todos os textos do nosso rodap, como
podemos observar este recorte se parece muito com uma estrutura de tabela.

34
2.7 Fatiando nossa Logo

Com a mesma tcnica utilizada nos itens anteriores, desenhe dois

retngulos sobre as duas partes estilizadas localizadas nos dois cantos do
Layout. Devemos tomar cuidado para no selecionarmos os cabealhos j que
sero selecionados posteriormente.
Desta mesma forma selecione o restante da Logo e a defina como
imagem. Agora, faa um retngulo sobre o nosso menu e uma fatia de 1px que
ser nomeada Fatia, em seguida, selecione a rea sobre a Logo e a parte
direita do menu. Faa um retngulo sobre toda a parte inferior restante do
menu, chegando prximo dos cabealhos.

2.8 Fatiando a rea do Menu

Agora hora de fatiarmos a rea do nosso menu, pois, conforme j

vimos, os textos do menu sero criados via HTML.
Novamente selecione uma fatia de 1px e d o nome de fatia_menu1,
definindo-a como imagem, em seguida, crie mais um retngulo com o restante
do menu, que ser a rea repetida.

35
 Agora, antes de fatiarmos os nossos cabealhos com a mesma
ferramenta Slice Tool, desenhe um retngulo na rea acima dos cabealhos de
forma que selecione toda a rea estilizada.

Aps essa etapa, selecione tambm a rea do meio dos cabealhos e,

na parte inferior abaixo dos cabealhos, defina estas duas aes como
imagem.

2.9 Fatiando os Cabealhos

Primeiro faa um retngulo sobre o nosso detalhe, um sobre o texto e

uma fitinha que ser renomeada como fitinha_headers, que ser repetida
atravs do nosso CSS. O restante da Header defina como HTML.

36
 Faa o mesmo no outro cabealho. Utilize os mesmos conceitos que
acabamos de verificar e procure entender o porqu de cada um.
No caso do segundo cabealho, no precisaremos definir uma fitinha j
que poderemos utilizar a fitinha definida no cabealho anterior.

Caso no tenha entendido, no se preocupe. Tudo isso ficar bem claro

no nosso prximo captulo.

2.10 Fatiando e Selecionando os Textos

Faa um retngulo sobre os textos e defina-o como HTML, pois sero

gerados pelo nosso HTML.

2.11 Fatiando Genricos de Imagens

Agora, selecione toda a rea das imagens como, anteriormente, atravs

da ferramenta Slice Tool e a defina como contedo HTML.

37
Depois selecione uma das imagens, que ser o contedo de repetio do
nosso HTML, e a defina como Contedo de Imagem.

2.12 Fatiando a rea da Privacidade

Agora para finalizarmos, resta apenas a rea da privacidade.

Na Header da privacidade, utilizaremos o mesmo conceito dos
cabealhos, em que selecionamos o detalhe, depois o texto privacidade e em
seguida criamos uma fitinha de 1px com o nome de fitinha_privacidade, para
repetirmos no retngulo que criaremos por ltimo.

Assim como fizemos anteriormente, selecione todo o texto da privacidade e

defina o contedo HTML.

38
 Por fim, define-se a ltima fitinha com nome de fitinha_privacidade 1px e
cria-se um retngulo na rea restante para repetirmos via cdigo CSS.

2.13 Exportando as Fatias atravs do Fireworks

hora de renomearmos todas as imagens definidas nos passos

anteriores.
Embutiremos as palavras chaves do nosso Layout no nome da imagem,
pois se trata de um recurso muito utilizado para a fcil indexao do seu site
via Google. Assim, quando algum for pesquisar um contedo correspondente
ao nome dado s suas imagens, essa ocorrer mais facilmente.

2.13.1 Definindo Padres de Nomenclatura para as

Imagens

Primeiramente, seja coerente ao nomear suas imagens, a fim dessas

estabelecerem clara relao ao contedo do seu site, ou seja, se o seu site
relacionar-se informtica, no devero ser destacados nomes relacionados
ao esporte, pois assim, provavelmente, o pblico alvo no ser atingido.
39
 Assim, como nosso site relaciona-se venda de cursos, ou seja, um
site E-learning, definiremos nossos nomes relacionando-os esse assunto, a
fim de alcanarmos as pessoas certas.

2.13.2 Nomeando a Genrica das Imagens dos Cantos

Depois de concludas as etapas anteriores, possvel observarmos as
vrias fatias definidas que possumos como imagens. Vamos renome-las
substituindo as nomenclaturas definidas pelo Fireworks.
Primeiro, atravs da janela de propriedades, selecionamos a fatia do
canto esquerdo da nossa tela e a nomeamos informatica no campo ALT e
informatica_lado_esquerdo no campo abaixo do Slice.

Dessa mesma forma, no canto direito selecionamos nossa fatia e

nomeamos novamente como informatica no campo ALT da janela de
propriedades e como informatica_lado_direito, no campo de nome abaixo do
Slice.

40
2.13.3 Nomeando a Genrica das Imagens da rea da
Privacidade
Agora, selecionaremos a rea localizada acima da rea HTML, que
definiremos acima da rea de privacidade, e da mesma forma digitaremos
cursos no campo ALT e no campo nome digitaremos curso_privacidade.

2.13.4 Nomeando os Detalhes e os Textos dos Detalhes

Agora, nossos detalhes faremos da seguinte forma: selecionamos o

primeiro detalhe, ou seja, aquele do primeiro cabealho e definimos como
curso no campo ALT, e no campo do nome, como curso_detalhe e
alteramos para contedo HTML os outros dois detalhes dos cursos e da
privacidade.
Dessa forma, faremos com todos os textos dos cabealhos, que tambm
sero adicionados na nossa pgina via HTML.

41
2.13.5 Nomeando o Restante do Contedo

Para finalizarmos o nosso servio, selecione o retngulo localizado no

centro do Layout, ou seja, entre os dois cabealhos que definimos como
curso. No campo ALT e no campo nome defina como elarning_informatica.
Pronto! Nosso layout est totalmente nomeado.

2.13.6 Gerando o HTML e Exportando as Fatias

Agora com todas as imagens nomeadas, hora de exportarmos as

imagens e gerarmos o HTML, o Fireworks ficar responsvel pela criao da
pasta imagens no nosso projeto e o HTML do projeto importando inclusive
essas imagens.
Para realizarmos essa tarefa no nosso Fireworks, deveremos clicar no
menu File >> Export, quando uma nova janela abri-se no campo Salvar em:
encontre a pasta do nosso projeto. Na aba HTML manteremos a opo Export
Html File, o que far com que o Fireworks gere o arquivo HTML que
desejamos.
Na parte inferior selecione a opo put images in subfolder, o que far
com que o Fireworks gere a pasta imagens.

42
 Se voc observar, agora, na pasta do projeto, foi criada uma pasta
imagens com todas as nossas fatias nomeadas, como fizemos neste captulo e
devidamente prontas para criarmos o nosso CSS.
Tambm observamos um arquivo HTML, com todas as imagens criadas
e devidamente prontas.

hora de recapitularmos!

Neste captulo voc aprendeu como utilizar o Fireworks para fatiar as

imagens e export-las. Aprendeu, tambm, que atravs desse software
podemos gerar a pasta imagens e o contedo HTML pronto para receber o
CSS.
Finalizamos o segundo captulo. Aguardo por voc na prxima etapa,
onde continuaremos o projeto criando o nosso CSS atravs do Dreamweaver,
e logo depois, importando-o atravs do HTML criado pelo Fireworks neste
captulo.

43
Captulo 3
Formatando o HTML com o Uso das
Folhas de Estilo
Neste captulo utilizaremos o Adobe Dreamweaver para o
desenvolvimento das folhas de estilo.
Essas folhas consistem na formatao de todo o HTML em cdigo
separado da pgina, deixando assim, os projetos mais organizados.
Lembre-se que necessrio o Adobe Dreamweaver instalado em seu
computador, para a realizao dos exerccios deste captulo.

3.1 Abrindo o Dreamweaver e Definindo Configuraes do

Site

A partir do Windows selecione o menu Iniciar >> Programas >> Adobe

Master Collection >> Adobe Dreamweaver CS4 Professional

44
 Aps aberta a sute do Dreamweaver, agora hora de criarmos um site.
Com a janela do Dreamweaver aberta, clique em site >> new site.
Antes de passar para a prxima etapa crie uma pasta e renomei-a
novo.

3.1.2 Definindo as configuraes do nosso site

No primeiro campo Example mysite digite "siteExemplo" e pressione

next.
Na prxima tela mantenha selecionada a opo: No i do not want to use
a serve tecnologic. No folder escolha a pasta criada para o nosso projeto,
especificamente na pasta images e depois clique em Salvar. Selecione no
campo How do you connect to your remote server a opo: none clique em
next e depois na opo Done.

3.2 Abrindo o nosso HTML no Dreamweaver

Como voc pode observar nosso HTML, criado aps a exportao do

layout no captulo anterior, pode ser aberto a partir do Dreamweaver, para isso:
clique no arquivo que se encontra do lado direito do Dreamweaver e logo
abaixo do seu menu selecione a opo design.
Observe que nosso HTML est com esqueleto um pouco deformado.
A partir daqui, entra o papel da nossa CSS, definindo a formatao para as
reas que definimos como HTML.

45
3.3 Criando o Arquivo CSS

Para criar um arquivo do tipo CSS, clique no canto direito da tela na

opo new CSS rule, que se encontra ao lado da ferramenta Atach Style sheet,
ento a janela Css rule ser aberta.

46
3.4 Definindo um Estilo para o Corpo da Pgina

Na parte inferior da janela new Css rule, escolha a opo new style
sheet file. Agora, adicionaremos uma classe no campo Selector type, para isso:
defina uma tag e no campo selector name escolha a opo body.
Clique em Ok; ele pedir que voc escolha um nome para a CSS, neste
caso, definiremos como css. Observe se esse est sendo salvo dentro da
pgina do nosso projeto e clique em salvar.
Uma janela chamada CSS rule Definition for Body ser aberta
posteriormente; na aba Category, escolha a opo background; na opo
background-image clique em browse...
Procure a pasta do projeto, na pasta de imagens e procure um arquivo
chamado fatia_esquerda. Na aba background-repeat escolha a opo repeat-
x e, na opo background-position, escolha left; clique em OK e pronto.
Para finalizar o estilo do corpo da pgina, clique no lpis, localizado na
parte direita da tela. A janela CSS rule ser novamente aberta. Para que se
aplique um estilo para o corpo da pgina, clique no desenho da caixinha que
representa as cores e escolha a cor preta, preenchendo assim todo o fundo da
pgina.

47
 Agora, definiremos um repeat region, que no caso aquela fitinha de
1px que definimos na hora de fatiar o layout.
Para que voc entenda melhor, aquela imagem ser repetida vrias
vezes no eixo x formando a imagem por completo, deixando assim, o nosso
site mais leve.
Clique em background e em background-image; clique na opo browse,
v ate a pasta de imagens e selecione a imagem da fitinha, que definimos
como fatia esquerda Clique em OK.

48
3.5 Definindo um Estilo para rea da Logo

Agora, podemos criar uma repeat region para o fundo da rea do

banner. O prximo passo criar uma classe para que repita a fatia_logo e
preencha a rea da logo da mesma forma que fizemos para o fundo do Layout.
Na aba New Css Rule, no campo Selector Type, escolha a opo Class;
no campo Selector Name digite logo, que ser o nome da nossa classe, e na
rule definition, selecione o nosso arquivo css.

Na janela css rule, escolha novamente background; no campo

background-image, clique em browser e procure o arquivo fatia_logo. Clique
em Ok. No campo background-repeat, selecione a opo repeat-x, no
background-position, selecione a opo left e, novamente, clique em ok.

49
3.6 Definindo Estilo para rea do Menu

Utilize o mesmo conceito usado anteriormente para a rea do menu, que

neste caso, chamamos fitinha_menu.

3.7 Definindo as Headers dos Cabealhos

Ainda com base nos dois itens anteriores, continuaremos seguindo os

mesmos passos. Agora definiremos uma CSS de repeat region para os nossos
cabealhos, isso possvel utilizando as fitinhas recortadas no captulo
anterior. Na hora de definir uma classe para o seu css, seja coerente para
nome-las, para que essa no se perca futuramente e para facilitar sua
manuteno
.

50
3.8 Aplicando Estilos nos Contedos dos Cabealhos

Primeiramente, aplicaremos um Css de repeat region na rea definida

como HTML, situada na rea dos textos que sero inseridos posteriormente; o
conceito ainda o mesmo dos itens anteriores, j que o utilizaremos para todas
as reas de repetio do nosso Layout.
Agora, criaremos uma classe que ser usada em todas as reparties do
contedo dos cabealhos; caso seja necessrio inserir uma classe que no foi
inserida, clique sobre a rea targeted rule na janela de propriedades, assim
possvel observarmos as classes criadas.

51
3.9 Aplicando Estilos na rea da Privacidade

Nesta rea, possvel aplicarmos a mesma classe que utilizamos para

preenchimento do contedo dos dois cabealhos no item anterior; essa uma
tcnica muito utilizada, pois economiza linhas de cdigos deixando nosso CSS
mais leve.
Nos prximos itens, aprenderemos como trabalhar com classes para os
textos de menus e os textos dos contedos do Layout.

52
3.10 Textos para os nossos Cabealhos

Agora, vamos definir um estilo para os textos da classe dos headers dos
cabealhos. Clique na opo Css Styles All, assim ser possvel ver uma
estrutura de rvore com todas as nossas classes definidas at agora.
Clique sobre a nossa classe de headers dos cabealhos.

A janela de Css rulers ser aberta novamente, clique na opo Type e

no campo de colors; escolha a cor branca no campo Font-Family, defina
Tahoma,Geneva,Sans-Serif; na opo font-size defina o tamanho de 18 px, e
Font-weigth do tipo Bold da mesma forma que definimos no Photoshop. Clique
em OK.

53
 Agora, clique na clula correspondente ao texto do primeiro cabealho e
digite o texto Constitucional. Observe que o texto est devidamente
formatado.
Caso seu texto no esteja posicionado no meio da clula, v at a opo
Block e no campo Vertical-align defina a opo midle.

3.11 Formatando o texto do rodap

Para os textos dos rodaps ser necessrio, primeiramente, que voc

defina uma classe com as seguintes propriedades: Font-Family, a mesma
utilizada anteriormente, Font-Weigth do tipo bold; caixa de color tambm na cor
branca, mas com o texto com Font-size tamanho 15; e a Vertical-Align tambm
midle, alm de Text-Align do tipo center.

54
3.12 Formatando os Textos para o Menu

Abra a classe de formatao do menu e defina a formatao igual a do

rodap, com a diferena de um word-spacing de 6 e um padding-left de 20 px.

3.13 Formatando o Texto para o Contedo do Cabealho

Agora, vamos definir a classe dos textos que sero usados para os
contedos do cabealho e da privacidade, definindo o nome da classe como
textos.
A nossa classe ser formatada com font-size de 12px, font-weigth tipo
normal e font-Family tipo Tahoma e color branca. Voc tambm deve definir
um padding-left, um padding-top de 10px, para atribuio do espaamento da
coluna no topo.
Agora, ao invs de aplicar sobre a clula, aplicaremos diretamente no
HTML, clicando sobre a clula e procurando a nossa classe atravs da janela
de propriedades. Feito isso, copie o texto da lorem ipsum e cole-o nas reas
correspondentes. Aplique a mesma classe tambm no contedo da
privacidade.

55
3.14 Definindo Od Links e Criando Hover para o Menu

Agora, para aprimorarmos nosso aprendizado, faremos o Css de

maneira diferente.
D um duplo clique sobre nosso arquivo Css e digite o seguinte cdigo.

Pronto! As nossas classes para links esto criadas. Agora s

atribuirmos os links aos nossos menus e pronto. Clique sobre a clula
correspondente ao menu e coloque o seguinte cdigo para cada link <a
href=# > HOME </a>, faa isso para todos os textos do nosso menu e
observe nosso texto explicativo.

56
3.15 Duplicando as Imagens para o Contedo

Agora, inseriremos as imagens e finalizaremos o nosso terceiro captulo.

Vamos criar trs classes para manipular as imagens. Primeiro crie uma
classe com o nome de ".imagem", com o atributo padding-left de 10px; Agora
novamente crie uma classe com o nome de ".imagem2", com o atributo
padding-top de 10px; E por ltimo crie uma classe com o nome de ".imagem3",
e com o atributo padding-top e padding-left de 10px.
Feito as nossas classes para as imagens hora de inseri-las no HTML;
Primeiro clique na clula correspondente ao contedo das classes e clique no
modo CODE, boto que fica logo abaixo do SOURCE CODE, digite o seguinte
cdigo: <img src="images/imagem.png" alt=""/>
Agora pressione ENTER e novamente digite o seguinte cdigo: <img
src="images/imagem.png" class="imagem" alt=""/>
Mais uma vez pressione ENTER e digite o seguinte cdigo: <img
src="images/imagem.png" class="imagem1" alt=""/>
Pressione ENTER e digite o seguinte cdigo: <img src="images/imagem.png"
class="imagem2" alt=""/>
E por ltimo mais uma vez pressione ENTER e digite o seguinte cdigo:
<img src="images/imagem.png" class="imagem2" alt=""/>

57
 hora de recapitularmos!

Neste captulo voc aprendeu a fazer as folhas de estilo, formatando

assim todo o contedo do seu HTML construdo anteriormente.
Finalizamos mais um captulo! Espero que voc tenha adquirido novos
conhecimentos com os exerccios propostos.

58
Captulo 4
Criando Banners atravs do Flash
Neste captulo utilizaremos o Adobe Flash para o desenvolvimento de
Banners animados.
Praticamente todos os sites vistos na rede mundial possuem banners,
recursos de propaganda e marketing, que do vida ao site. Portanto, convido-
lhe a desenvolver um banner criativo.
Neste captulo, voc aprender alguns recursos muito utilizados para a
criao de banners, fique atento(a) a cada detalhe!
Lembre-se que para realizao dos exerccios desse captulo,
necessrio que voc tenha o Adobe flash instalado em seu computador.

4.1 Abrindo o Adobe Flash e Definindo o Tamanho do

Palco

A partir do Windows selecione menu Iniciar >> Programas >> Adobe

Master Collection >> Adobe Flash CS4 Professional.

Agora, crie um novo documento a partir do menu File >> New e escolha
a opo File Flash (Action Script 2.0) Tecla de atalho CRTL + N, ou atravs da
janela aberta no fash clicando em File Flash (Action Script 2.0).

59
Uma janela ser aberta, atravs da janela de propriedades localizada no lado
direito da tela do flash. Clique em Properties na janela de propriedades, clique
em Edit e no tamanho do palco digitando 553 no campo Width e 204 no
campo Heigth, clique em OK e pronto.

4.2 Importando Imagem para o Fundo do Banner

Com posse das novas dimenses do palco, hora de definirmos um

fundo padro para o banner atravs do menu file >> Import >> Import to
Stage CTRL + R. Uma janela ser aberta para seleo de um arquivo ou
imagem qualquer. No nosso caso, separei duas imagens em uma pasta no

60
Desktop do PC, chamada Banner, que possui duas imagens com respectivos
nomes de fundo e de vela.

Selecione os dois arquivos com o auxlio da tecla CTRL e clique em

Abrir. Agora as duas imagens estaro no palco do nosso Flash.
A partir do prximo item aprenderemos a distribuio dessas imagens
em Layers separadas.

61
4.3 Separando as Imagens em Layers Diferentes

Agora, o momento de separarmos estas imagens em duas Layers

diferentes, para que possamos criar animaes distintas para cada uma delas.
Selecione cada uma clicando sobre elas com a ajuda da tecla SHIFT,
aps selecionadas, clique com o boto direito e escolha a opo >> Distrbute
to Layers. Pronto, como podemos ver, na nossa timeline cada imagem est em
uma layer separada.

Exclua a Layer definida como Layer 1 clicando sobre a mesma e depois

clicando sobre o desenho do lixinho posicionado abaixo da Timeline, ou com o
boto direito sobre a Layer. Escolha a opo Delete Layer.

62
4.4 Alinhando o Fundo e Trancando a Layer

Agora, alinharemos nossa imagem definida como fundo, para que fique
posicionada de maneira a preencher todo o fundo do nosso palco.
Clique sobre a Layer correspondente ao fundo e d um clique no palco e
outro na janela Position and Size; digite 0 para o eixo X, e digite 0 para o
eixo Y.
Agora a imagem do fundo est posicionada de maneira que cubra todo o
fundo do nosso palco. Feito isso, clique no cadeado posicionado acima da
timelina para trancar a layer, evitando assim que se altere a posio da
imagem.

63
4.5 Criando uma Interpolao de Movimento para a
Imagem da Vela

Primeiramente, d um clique na posio correspondente ao frame 110

da nossa timeline e defina um quadro chave para o fundo e para a vela atravs
da tecla F6 do teclado, ou clicando sobre o quadro da timeline. Clique, agora,
utilizando o boto direito, em Insert KeyFrame.

Agora destranque a Layer da vela clicando sobre o cadeado, depois,

clique no quadro correspondente ao quadro 10. Crie mais um quadro chave e
posicione o atravs da janela de propriedades. Defina uma posio de 10
para o eixo X e 13 para o eixo Y.

64
 Feito isso, clique sobre a Layer com o boto direito. Escolha a opo
Create Classic Tween. Pronto, foi criado uma interpolao de movimento para
a nossa Layer. Caso queira observar a animao, posicione sobre a Layer 1 e
pressione ENTER.
(caso queira aumentar o tempo da animao clique em um quadro entre o fim
e o comeo da interpolao e pressione F5 ou diminua os frames por
segundos, utilizando a parte inferior do flash, no campo fps digitando 8).

4.6 Alterando o Alpha para o nosso Motion

Primeiramente, alteraremos o tipo do objeto que estamos trabalhando

transformando-o em um movie clip, para que possamos trabalhar com algumas
propriedades do objeto, tais como: Alpha, Sombreamento, etc.
Clique sobre a imagem da vela; pressione F8 e escolha a opo movie Clip no
campo Type. Digite vela no campo name e clique em OK.

Agora, d um clique no frame1 e outro sobre a imagem na janela de

propriedades no campo Color Effect. Selecione a opo Alpha e digite um valor
de 0 para o alpha do frame 1, posicionando a imagem de forma que fique fora
do palco.

65
 Na posio do frame 10, clique novamente sobre a imagem da vela e
confira se o alpha est definido como 100; caso no esteja, digite 100 neste
campo. Pronto, j temos uma animao de alpha definido para a vela.
Caso queira observar a animao, pressione ENTER ou CTRL +
ENTER.

4.7 Definindo Textos para o Banner

Agora, hora de definirmos a animao para um texto do nosso Layout.

Primeiramente, crie uma nova Layer e, em seguida, clique no quadrado, na
parte inferior da janela do Flash, dando o nome de texto.

66
 Agora, insira um quadro chave de nmero na nova Layer, criada a partir
da tecla F5. Com ajuda da ferramenta de texto, digite no palco o texto velas
decorativas; selecione o texto e, na janela de properties, atravs da janela
Character, no campo Style, escolha Cooper Black; no campo Size escolha
40 e uma cor branca.

4.8 Animando o Texto

Primeiramente, alteraremos o tipo do objeto que estamos trabalhando

transformando-o em um movie clip, para que possamos trabalhar com algumas
propriedades do objeto, tais como: Alpha, Sombreamento, etc.

67
 Feito essa etapa, posicione sobre o frame 90 criando um classic tween.
A partir do frame 110, posicione a imagem fora do palco; caso queira testar a
animao pressione enter a partir do frame 1 como feito anteriormente.

4.9 Salvando o Banner e Exportando o SWF

Depois de criado o nosso banner, hora de exportar o arquivo de

extenso Swf, que ser chamado atravs do HTML e aparecer no site.
O arquivo salvo no Flash com extenso FLA ser guardado para
possveis edies do arquivo.
Para exportar um arquivo de extenso SWF clique em File >> Export >>
Export Movie ou atravs da tecla de atalho CTRL + Shift + Alt + S. Feito isso,
escolha onde quer salvar o arquivo. No nosso caso, ser na pasta banner
localizada no Desktop.

68
 Para exportar um arquivo na extenso Fla e salvar nosso banner clique
em file >> Save, ou com o atalho CTRL + S do teclado.

Voc pode tambm salvar uma cpia do banner atravs da opo File
>> Save as, ou com a tecla de atalho no teclado CTRL + Shift + S. Caso o
arquivo j tenha sido salvo anteriormente aparecer uma mensagem que
perguntar se voc quer substituir o que j estava salvo, ento, clique em
Salvar e depois sim.
Pronto est definido o nosso banner!

69
4.10 Inserindo Banner no nosso Layout

Agora, abra novamente o Dreamweaver e clique no Layout. No lado

direito do Dreamweaver possvel observar o arquivo SWF, na estrutura de
pasta do projeto.
Clique sobre o arquivo SWF e arraste-o para a clula destinada a rea
do banner, na parte verde do nosso Layout.
Pronto, est finalizado nosso Layout, para observ-lo, clique em F12 e
verifique o projeto finalizado.

hora de recapitularmos!

Neste captulo voc aprendeu a fazer um banner simples com ajuda do

flash e, sobre alguns recursos muito utilizados pelos webdesigners. Agora,
utilize toda sua criatividade e exercite suas habilidades com as tcnicas
adquiridas neste livro.
Finalizamos o livro! Espero que voc tenha adquirido novos conhecimentos
com os exerccios propostos e que futuramente possa utiliz-los de forma
profissional.

Boa sorte e Sucesso!

70