Apostidream PDF

SISTEMA DE ENSINO MICROMAX 2013-todososdireitosreservados.
g
i
n
a
1

Vamos agora trabalhar com o Dreamweaver CS6.

Temos ao abrir o programa o Create New.

Vamos clicar em More, em Html e do lado direito em
DocType, vamos permanecer com XHTML 1.0 Transitional,
clique em Create.

Ele j cria o documento, temos aqui o modo design.

O modo Split ele divide a tela no modo deisgn e no modo
cdigo.

E temos aqui o modo Code que somente o modo cdigo.

Vamos fazer o seguinte: File>>New>>CSS, vamos criar agora
um arquivo CSS.


P
g
i
n
a
2

Lembrando que o desenvolvimento desse curso
imprescindvel o conhecimento em CSS e Tablesess, ento se
voc est fazendo est nesta etapa do curso obviamente
voc re j sabe trabalhar com CSS.

Vou salvar esse arquivo, vamos criar uma pasta chamada
site.

Uma pasta dentro dessa pasta chamada CSS.

E tambm outra pasta chamada imagens.

Vamos salvar o arquivo CSS como estilo.css dentro da
pasta CSS.

Podemos pular pro outro documento, lembrando que o
documento .html.

Vamos salva-lo agora na pasta site fora da pasta CSS com
o nome de index.html.

Ento temos aqui o estilo.css e temos aqui o nosso
documento.


P
g
i
n
a
3

Vamos modificar o title para Micromax cursos.

Vamos criar o link aqui colocar link href=.

E aqui em Browse vamos puxa o arquivo CSS que criamos.

E voc pode ver que ele coloca aqui css/estilo.css

Digite agora: rel = stylesheet type =text/css vamos
fechar />.

E a j estamos puxando esse arquivo estilo.css.

Se eu colocar um body, colocar aqui uma cor {background:
orange}.

Obs: No esquea de clicar em Save para fazer a alterao.
Teremos aqui o background do documento todo laranja.

Vamos fazer o seguinte aqui no documento index.html
modo Code.

Dentro do <Body>, damos um espao aqui pra trabalhar e
vamos criar nossa primeira tag <div>
<div id=box_pai>
a eu sei que o box maior, vamos fechar essa div.</div>

P
g
i
n
a
4

Ento temos aqui box pai, digite: Central.

Vamos copiar essa div, colocar mais abaixo e vos colocar
uma endentao aqui.

E aqui eu vou colocar o rodap, ento temos aqui o box pai
e o rodap, so exatamente esses.

O box pai exatamente o que vem at o rodap.

E o rodap que o box de baixo.

Como o rodap vai ser fluido ele tem que ficar fora desse
box pai, ele tem que estar embaixo, e dentro do box pai,
vamos colocar os outros box, mas por enquanto vamos
trabalhar desta forma.

Feito isso Crtl+S para salvar, vou abrir aqui o arquivo:
Site>>index.html, tivemos apenas a incluso do contedo,
mas no tivemos a formatao tanto da tag <div> box pai
como do rodap.

ento no estilo.css, vamos fazer as alteraes.
#box_pai {width:

P
g
i
n
a
5

No Fireworks temos o tamanho do box que vamos
trabalhar, clicando no topo, vemos que ele tem 1000 pixels.

Deixa eu colocar 1000px, vamos colocar o height 1200px
pra agente poder diferenciar, colocar em camadas, vos
colocar o background branco e vamos fechar, atualizar.
#box_pai {width: 1000px;height:1200px;

Vamos colocar aqui uma endentao, colocar em camadas.

Vamos colocar um Background com a cor branca e vamos
fechar e no esquea de salvar.

#box_pai{
width: 1000px;
height:1200px;
background:#FFF;
}
E a j temos aqui, voc pode ver que ele cria aqui o box
com 1000 pixels, mas ele coloca alinhado esquerda,
depois vamos ver como faz para alinhar isso no meio.

Agora vamos fazer a formatao do rodap, ento vamos
criar o rodap, colocar height de 80 pixels, vamos colocar
tambm o background cinza.

#rodape{
height: 80px;
background: #CCC;
Vamos fechar.

P
g
i
n
a
6

Vamos atualizar e embaixo voc j v o rodap e o rodap
ele t fluido, ele vem at o final.

Porque no colocamos o tamanho da largura, da dimenso
que 1000 pixels para o box pai.

S que para o rodap no tem, quando voc determina o
tamanho da largura de determinada <div>, essa <div> ela se
expande.

Ela cria uma expanso dessa <div> entre as duas margens,
ento isso se chama fluido, ele flui at a outra margem, s
que tem uma observao, voc pode ver que ele tem um
espao aqui embaixo e tambm um espao aqui em cima.

Podemos resolver isso da seguinte forma, vamos colocar
aqui no <body>.
Body {background: orange ; margin: 0 . }

Atualizando vocs podem ver que resolveu o problema.

S que ainda podemos fazer o seguinte, podemos colocar
um asterisco(*) e colocar:
*{margin:0;}
No esquea de tirar o cdigo anterior.

E voc v que resolve tambm o problema, ele tira o espao
aqui de toda nossa estrutura. Agora podemos ver que o
rodap ele t fluido, s que o box central, que o box pai
ele t alinhado esquerda.

Primeiro deixa eu organizar aqui essa endentao.

P
g
i
n
a
7

Vamos fazer o seguinte, no box_pai vamos colocar mais um
cdigo:
margin: 0 auto;

Vamos salvar CTRL+S, e olha o que acontece no Google
Crome, ele centraliza, s que em alguns navegadores pode
ter um problema dessa dica no funcionar, ento pra gente
resolver isso muito simples.

V no <body> e coloca o text-align:center; agente centraliza
todo o contedo que est dentro do box, consequentemente
tambm do <body>, onde estamos aplicando.

S que o box, pra gente no ter todo o contedo
centralizado coloca do box_pai um text-align; left;.

A nossa prvia do incio da estrutura est montada.

Agora vamos desenvolver o topo do contedo.
MDULO 3 CRIANDO O TOPO NO XHTML
Vamos criar o topo do nosso projeto.
Temos aqui o topo que contm trs itens, a logo marca,
essa imagem no background e o background.

Vamos copiar o background, Crtl+C, depois no menu
File>>New crie um novo documento com as medidas do
topo Largura: 1000px e 115px de altura, para colar use a
combinao de teclas Ctrl+V.


P
g
i
n
a
8

Se exportar esta imagem toda, e colocar como background
no topo ela vai ficar muito pesada ento o carregamento do
site vai ficar muito demorado tambm, a gente pode fazer o
seguinte, Modify >> Canvas >> Canvas Size, colocar 1pixels
na largura.

Ai a gente reduz esta imagem para este filete.

No CSS a gente vai solicitar que esta imagem se expanda
ento a gente no vai precisar utilizar a imagem daquele
tamanho todo. Vamos clicar em File>>Image Preview.

Se eu colocar como JPEG vai ficar em 308 Bytes.

Se eu colocar em PNG 32 vai ficar em 202.

PNG 24 em 197 e a qualidade mantida.

Vamos Exportar para dentro da pasta Site>>imagens, como
bg_topo, vamos salvar e fechar.

Agora a gente vai pegar a logomarca, Ctrl+C.

V no menu File>>New, coloque as dimenses da logo:
487px de largura e 93px de altura.

P
g
i
n
a
9

No esquea de tirar o Canvas color, ou seja, deixa somente
a transparncia, ento est logomarca vai ser importada
transparente Vamos colar Ctrl+V.

Vamos exportar esta imagem, clique novamente em
File>>Image Preview... e ai a gente tem que colocar o PNG
32 pro fundo ficar transparente, feito isto, vamos salvar
como logo, ok.

E vamos copiar esta imagem aqui do canto, a mesma coisa,
vamos colocar transparncia no fundo.

Tambm com PNG 32 e a gente vai salvar como topo_img
feito isto, podemos exportar.

Tambm com PNG 32 e a gente vai salvar como topo_img2
o nosso robozinho feito isto, podemos exportar esta ltima
imagem do topo.

Vamos abrir o Dreamweaver e modificar colocando Rodap,
ok.

Agora a gente tem Rodap em baixo.

No box_pai a gente vai criar uma nova <div>:
<div id=topo>

P
g
i
n
a
1
0

Esta nova <div> vai ser chamar topo.

Vamos fechar a </div>.

Vamos colocar aqui topo, vamos atualizar.

Agora a gente vai criar a formatao do topo.

Depois do box_pai, vamos criar a <div> #topo.
#topo{

Vamos criar um background

P
g
i
n
a
1
1

Vamos procurar no Fireworks um background, a gente pode
colocar um background predominante aqui neste bloco que
exatamente da cor do nosso degrade COR: #C8D0D8.

Vamos colocar um height de 115pixels.

Pois, o tamanho da Altura aqui do topo no Fireworks,
Ctrl+S.

Vamos atualizar e a gente j tem o bloco aqui do topo.

Uma observao, a gente ver que aqui no layout a gente
tem um espao entre o contedo e a margem do site, a
gente pode emular este espaamento trabalhando no
#box_pai, colocando um padding de 10px.

P
g
i
n
a
1
2

Atualizando, a gente cria aqui o espao.

Como o rodap est fora do box_pai que foi a <div> que a
gente criou, a div_pai, ele no pega este padding, somente
o box_pai, ok.

Bom, feito isto, a gente vai colocar agora uma nova <div>
dentro desta <div> topo, por qu?

Porque aqui nesta <div> topo eu vou fazer o seguinte, eu
vou colocar aqui o background que esta imagem do fundo
que a gente exportou.

Vamos colocar aqui no background depois da cor esse
cdigo que corresponde ao caminho da nossa imagem.

url(../imagens/bg_topo.png);

A gente vai colocar aqui um repeat-x top, para ele repetir
somente na horizontal e ficar no topo.

Voc pode ver a atualizao e a incluso do background.

P
g
i
n
a
1
3

Como eu disse a gente usou apenas um filete de imagem, e
esta imagem expandiu quando a gente fez a solicitao no
estilo.css, isto aqui indispensvel para voc desenvolver
projetos de sucessos.
Bom, feito isto, a gente vai ficar agora uma div dentro desta
<div> topo, que vai ser:
<div id=topo_secundario>

Vamos fechar a </div>. Eu vou digitar aqui, logo.

Atualizou pra logo.

A gente vai criar esta formatao na folha de estilo depois
do topo aqui, colocar:
#topo_secundario{
}

Vamos copiar este background

E colar para a gente poder ganhar tempo.

S que eu vou tirar a cor, vou colocar aqui url que tem aqui
a imagem.

P
g
i
n
a
1
4

Mas ao invs de ela pegar o bg_topo.png que a gente est
utilizando em cima, ela vai colocar topo_img.png.

Eu vou tirar este repeat-x top para vocs verem o que
acontece.

Ele vai duplicar a visualizao da imagem aqui em cima.
Eu posso colocar aqui tambm o height 115px, que o
tamanho que a gente est trabalhando para o topo.

Atualizar e ele repetiram, na verdade ele no duplica, ele
usa a mesma imagem s que repetidamente.

Para a resolvermos isto, depois do png, do fechamento dos
parnteses, no-repeat, vamos atualizar.

Ele no repente, s que fica na esquerda.

Vamos vai colocar o, posicionamento, Right.

Ele vai ficar na direita.

Aonde tem o texto Logo, que a nossa tag <h1> eu vamos
colocar a Logo e o nosso querido Robozinho Max:
<h1><img src=></h1>

P
g
i
n
a
1
5

Vamos colocar aqui uma borda, com 0)
<h1><img src= border=0 /></h1>

Vamos colocar aqui tambm o nosso Link.
<h1><a href=><img src= border=0 /></h1>

Fechar o Link.
<h1><a href=><img src= border=0 /></a></h1>

Vamos colocar aqui no Link o caminho para a nossa
primeira pgina index.html.
<h1><a href=index.html><img src= border=0
/></a></h1>

Com a borda zero, ele no vai criar aquela borda quando
voc insere o link numa imagem, e aqui a gente vai colocar
a mesma coisa.
<h1><a href=index.html><img src=imagens/logo.png
border=0 /></a></h1>

P
g
i
n
a
1
6

Ai a imagem aparece aqui com o link.

Vamos trabalhar o <h1> que aonde est a nossa imagem
com link e tudo, a gente vai trabalhar o topo_secundario
<h1>, eu vou copiar, o topo_secundario insira o <h1>.
#topo_secundario h1{
}

Vamos trabalhar o padding do topo.

Vamos ver mais ou menos aqui o espaamento que a gente
tem aqui do topo, mais ou menos 8px.

Vamos colocar ento aqui 8px de altura

E ele afasta do topo.

Vamos colocar o espaamento da esquerda, mais ou menos
29PX.

Ento vamos colocar aqui margem esquerda de 29px.
Margin: 0 0 0 29px;

P
g
i
n
a
1
7

Feito isto, vamos atualizar e ele cria o espaamento.

Agora vamos colocar o nosso Robozinho.

Vamos primeiro redimensionar a altura e largura da Logo
para W: 440px e H: 88, com alinhamento a esquerda.

Agora vamos inserir mais uma tag <img> com W: 184 e H:
147 com borda 0.
<img src=imagens/topo_img2.pngwidth=184
height=147 border=0 />

No esquea de fechar a tag </h1> depois de inserir esta
segunda imagem, essa no tem Link, podemos ver o
resultado final do nosso topo.

Ento a gente pode visualizar a logo marca, a nossa
mascote e a imagem do nosso topo, voc pode ver que
exatamente da forma como ns planejamos no layout,
Ctrl+Z para voltar tudo ao normal no nosso projeto do
Fireworks.

Est exatamente, quase milimetricamente igual ao que a
gente planejou, incluindo a borda, que o espaamento que
criamos no nosso layout, ento o topo est criado, vocs
podem observar a facilidade de trabalhar com o CSS.
Modulo 3 20. CRIANDO MEU MENU EM XHTML
Vamos desenvolver agora o menu do nosso projeto, temos
aqui o prottipo do nosso menu que tem 50px de altura,
tem uma fonte com o tamanho 14px Arial.

Vamos pegar esta barra, Ctrl+C, vai no menu File>>New.

Clique com Ctrl+V para colar.

Est borda que contem na imagem, a gente pode tirar,
vamos colocar 0 aqui na posio x.

P
g
i
n
a
1
8

Vamos fazer o seguinte, dar um Ctrl + para aumentar o
Zoom, voc pode ver que a gente tem uma borda aqui, eu
vou aumentar um pouquinho aqui a imagem para poder
tirar esta borda, eu vou aplicar o priset novamente que a
gente tem uma colorizao correta.

Agora a gente vai fazer o mesmo processo que a gente fez
com o topo, Modify>>Canvas>>Canvas Size.

Vamos colocar 1px que vai ser o filete do menu.

Est aqui exatamente o que a gente precisa.

Clique em File>>Imagem Preview, a gente pode salvar como
PNG 24.

A gente vai exportar para a pasta imagens, como,
bg_menu.

P
g
i
n
a
1
9

Agora a gente vai fazer o seguinte, eu vou dar um Ctrl+Z at
voltar a borda e a gente pode pegar a cor da borda.

J temos a cor dar borda vou deixar at no cantinho aqui
reservado a cor da borda.
#FF9F00
Vamos dentro do id=box_pai e a baixo do topo ento a
gente tem aqui o topo.

Temos aqui a <div> do topo secundrio.

E a gente vai colocar aqui, depois do fechamento da
segunda <div>.

Est <div> aqui est fechando o topo .

E esta <div> aqui est fechando o topo secundrio, ok.

Vamos l, depois do topo aqui eu vou colocar:
<div id=nav_bar>

P
g
i
n
a
2
0

Agora vamos fechar a </div>.

E vamos colocar o seguinte <ul></ul>.

Vamos colocar <li></li>.

Dentro da <li> vamos colocar um link sem nada, sem
nenhuma informao, vamos colocar aqui uma # de
preferncia.

E agora a gente vai colocar aqui, Home.

J a Empresa, Nossos cursos, Portflio dos Alunos,
Franquias, Parcerias e Contato, vamos copiar a linha toda e
ai a gente vai colar.

Vamos l, Home, Empresa, mais a baixo vamos colocar a
outra linha, Portflio dos Alunos, depois temos Franquias,
Parcerias e para finalizar, Contato.
<li><a href="#">Home</a></li>

P
g
i
n
a
2
1

<li><a href="#">Empresa</a></li>
<li><a href="#">Nossos cursos</a></li>
<li><a href="#">Portflio dos Alunos</a></li>
<li><a href="#">Franquias</a></li>
<li><a href="#">Parcerias</a></li>
<li><a href="#">Contato</a></li>

Feito isto, vamos atualizar com Ctrl+S e ai voc tem o menu
desta forma, sem nenhuma formatao.

Agora ns vamos fazer a formatao deste todo esse
contedo do menu. Temos aqui a nav_bar, eu vou copiar.

Vamos colar aqui em baixo de topo_secundario h1.

Vamos colocar aqui a # e dar mais um Enter aqui para
organizar.

Vamos copiar este nav_bar acrescentando aqui o ul.

Vamos copiar novamente e agora acrescentar ul e li.


P
g
i
n
a
2
2

Mais uma vez copiar, e agora vai ser ul li a que o evento
do link .

E o hover, acrescentando aqui depois do a.

Ento ns temos ai a predefinio do nosso menu.
Aqui em nav_bar ul eu vou colocar o height:40px que o
tamanho do nosso menu.

Vou colocar tambm o background, aquela imagem que a
gente exportou, aquela imagem de 1px que a imagem do
menu, com o repeat-x top para que a gente possa fazer com
que esta imagem se repita para o lado.

A gente j tem o menu aqui, mais temos um probleminha
com o nosso robozinho, temos que voltar no fireworks.

Dividir ele ao meio, pois ele est interferindo no
alinhamento do topo com o menu.

Agora est exatamente do tamanho que a gente
desenvolveu no firework, s que o menu ele est na vertical.

Vamos colocar ele na horizontal colocando ele aqui na li,
display:inline;

P
g
i
n
a
2
3

E ai a gente resolve este problema.

Aqui na ul, vamos colocar um padding 0;

E ai a gente cola o menu aqui no lado esquerdo.

A gente pode fazer o seguinte tambm, colocar aqui no
topo 8px e diminuir aqui 8px na altura, colocar 32px em
Heights.

A gente mexe a posio do contedo do menu mas a gente
permanece no tamanho correto, toda a vez que a gente
trabalhar com padding a gente tem que diminuir o tamanho
da caixa que aumenta mais 8 que ao invs criar uma
proporo.

Aqui no li, a gente vai colocar um margin , colocar um 0
para a esquerda, ento vamos colocar 15px na esquerda e
5px na direita, agora sim, ok.

Vamos trabalhar aqui a personificao aqui dos links,
vamos colocar primeiro aqui no ul um font-size de 14px,
Ctrl+S e ai a gente j mexeu no tamanho.

Vamos colocar no ul li a text-decorantion: none;

Vamos tirar o sublinhado, color:

V no Fireworks e veja a cor que vamos colocar no texto do
menu.

Vamos colocar a cor do Link.

Podemos fazer o seguinte tambm, vamos colocar um font-
weight:bold;

P
g
i
n
a
2
4

Vamos colocar um negrito aqui no menu, no body vamos
determinar uma famlia de fontes com font-family: Arial,
Tahoma, verdana;

Atualizamos.

Visto tambm a atualizao aqui do menu, a gente tem que
afastar um pouquinho, aumentamos o tamanho da fonte,
temos agora que colocar um pouquinho mais pra baixo o
nosso menu, vamos fazer isto facilmente aqui, mexendo na
#nav_bar ul a gente pode colocar aqui 12px e 28px.

Ou seja, juntando aqui a altura com o padding do topo, a
gente vai ter 40px que o tamanho deste menu e t feito.

Antes de continuarmos no menu vamos colocar o pedao
que falta da mo do nosso robozinho, dentro da <div
id=nav bar> no nosso index, abaixo do ltimo link
contato insira uma nova <div> com o nome de
topo_secundario2.

Agora vamos inserir dentro a nossa imagem.

Voltando na nossa folha de estilo, vamos criar abaixo de
#topo_secundario o nosso topo_secundario2, com os
seguintes estilos.

Vejamos como ficou:

Vamos corrigir o nosso link do contato que ficou em baixo
da mo do nosso Robozinho, vamos retornar a nossa folha
de estilos e diminuir o margin esquerdo da #nav_bar ul li
para 2px.

Ok! est pronto, veja como ficou.

P
g
i
n
a
2
5

Agora a gente vai fazer o seguinte, vamos copiar a text-
decoration do #nav_bar ul li e colar no #nav_bar ul li
a:hover fazendo apenas uma modificao, colocando
underline.

Ou seja, quando voc passar a setinha do mouse sobre o
link ele vai sublinhar, atualizar e pronto.

Ento j temos aqui o menu funcionando exatamente como
a gente projetou no firework.

Temo que afastar este menu do topo e ai a gente tem duas
opes, a gente trabalha com o margin do menu ou o
margin do topo, ento a gente pode trabalhar por exemplo
o margin do topo para poder afastar, aqui no #topo, a
gente pode colocar.

Vamos ver exatamente o espaamento:

4px, Ctrl+S e pronto.

Afastou o menu do topo, s que agora falta colocar a borda
que separamos.

A cor da borda vai ser: #FF9F00, no nav_bar ul, vamos
colocar um border 1px solid e a cor.

Quando a gente vai colocar est borda a gente cria mais
1px para cima e 1px para baixo, porque ao invs de ele
utilizar o mesmo px da altura, ele insere mais 1px em cima e
mais 1px em baixo, mais 1px do lado direito e 1px do lado
esquerdo, s que como da dimenso a gente no est
declarando nenhum valor, a gente no precisa mexer no
lado esquerdo e no lado direito mas na altura a gente tem
que mexer, a gente tem que colocar 26px porque ai a gente
vai colocar a borda e no altera o tamanho.

Oh, agora sim temos a borda.


P
g
i
n
a
2
6

A gente pode tambm aqui fazer o seguinte, colocar o
padding 13px e 27px no height porque ele desceu um
pouquinho.

Atualizou e agora est correto com a borda e a
personalizao que a gente fez.

Modulo 3 21. Criando bloco superior e incluindo Slide
Jquery
Ns vamos criar agora o bloco superior que conter o slide e
o nosso box de multimdia.

Vamos abrir, Dreamweaver, vamos acessar o cdigo, depois
da nav_bar, vamos criar uma <div id=contente>, vamos
chama-la de contente e fechar a </div>.

Dentro da <div> contente, vamos criar uma <div> aqui em
baixo chamada de multimdia.

Agora vamos trabalhar a personalizao desta <div>
multimedia que vai ser o bloco aqui da direita, a gente vai
fazer o processo a contrrio e vocs vo entender o motivo.

Abrir aqui o nosso style, depois da nav_bar , vamos criar a
<div> multimedia, vamos fechar, colocar a dimenso com
Width: 220px e a sua altura height: 259px, float, right.

Vamos pegar a cor: #111111.


P
g
i
n
a
2
7

E colocar de background.

Vamos atualizar, o site, e temos aqui a <div>.

S mexer aqui, 320px ok.

Agora, ns temos aqui uma pasta, que a pasta scripts.

Que a gente tem aqui j o slide criado.

Este slide j foi customizado especialmente para o espao
que a gente precisa.

Vamos ter que fazer o seguinte, ns temos aqui algumas
pastas, que o CSS, imagens e o Js.

Dentro do CSS, eu tenho o arquivo do estilo do slide.

Vou recorta-lo e coloc-lo dentro da nossa pasta no CSS do
projeto.

Agora eu vou pegar a pasta js, que contm os dois arquivos,
que so os javascritps.

Vou recorta-lo e coloc-lo aqui dentro tambm.

P
g
i
n
a
2
8

Agora vamos voltar no slide, temos a pasta images.

Como dentro do nosso projeto a gente tem uma pasta
chamada imagens, a gente pode pegar a passa imagens,
recorta-la e coloca-la aqui dentro, por que no vai sobrepor
a outra imagem, caso fossem imagens, a gente no poderia
colar.

Bom, agora temos agora o nosso arquivo slide.html.

Vamos abrir com o Dreamweaver, e a gente tem aqui, todo
o contedo que exibe a Picture.

Vamos copiar as duas linhas do Java script.

Vamos abrir o index do nosso projeto, e vamos colar a linha
dos scripts abaixo da linha do que chama o arquivo.css.

Vamos fazer a mesma coisa para todo este script que est
dentro do head.

E vamos colocar aqui tambm, depois da linha que a gente
colamos.

P
g
i
n
a
2
9

Outra coisa, copiar a linha do CSS.

Colar a baixo.

Vamos modificar para slide.css que exatamente o arquivo
de estilo do slide.

Ento temos aqui, o slide.css.

O arquivo javascript.

E os cdigos javascript, para que OS SLIDES FUNCIONEM.

Vamos clicar em Ctrl+S para salvar, agora dentro do
slide.html, vamos copiar toda esta <div> da picture, at o
final.

Vamos colar dentro da <div id=contente>, antes da <div
id=multimedia> que a gente criou dentro do nosso index.

Vamos clicar em Ctrl+S para salvar.

P
g
i
n
a
3
0

Vamos abrir o nosso projeto, e agora temos os slide
funcionado exatamente no local que a gente precisava.

Eu posso trabalhar a dimenso do box, feche o slide que j
no vai servir mais para a gente, apesar de eu
disponibilizado separadamente, caso voc queira utilizar em
algum outro projeto, vamos clicar agora no estilo, dentro da
pasta CSS.

Vamos procurar o multimedia, vamos colocar 323px de
width, acho que assim est perfeito.

Agora vamos fazer o seguinte, vamos colocar aqui dentro
uma imagem.

Eu vou pegar aqui uma imagem, a gente teve uma
modificao pequena em relao a dimenso, a dimenso
aqui no layout era 334, mas por conta das predefinies da
dimenso da Picture, do slide, a gente teve que fazer
modificao, isto normal acontecer quando a gente est
trabalhando num layout e quando a gente utiliza um slide
pronto, ok.

A gente vai ter agora o tamanho de 323px.

Volte ao Fireworks, Copie com as teclas Ctrl+C.

P
g
i
n
a
3
1

V no menu New, modificar aqui 323px a altura 259px ok.

Colar a nossa figura.

Colocar aqui o fundo desta cor.

E vamos salvar no Image Preview.

Com a extenso GIF.

Agora sim, vamos salvar na pasta do nosso projeto, em
imagens, multimedia.

E agora vamos inserir no index.html, aqui aonde estava
Right.

P
g
i
n
a
3
2

Vamos inserir a nossa <tag> da imagem.

Vamos buscar a nossa imagem na pasta.

Ento temos aqui multimdia, vamos fechar a tag <img>.

Vamos clicar em Ctrl+S para salvar e atualizar a imagem j
inserida no bloco do nosso projeto, bloco este responsvel
pela a exibio de um vdeo, ento a gente j teve aqui a
organizao do bloco superior com a incluso do slide e da
multimdia.

Modulo 3 22. Criando blocos superiores centrais no
XHTML
Vamos criar agora, os dois blocos centrais superiores do
nosso projeto, o bloco esquerdo aonde contm a
informao da nossa empresa e tambm o direito, aonde
iremos incluir o facebook.

Vamos acessar nosso projeto, embaixo do nossa <div>
multimdia, vamos as <div> que a gente vai criar.

Ento a primeira que ser a <div> pai, antes vamos aqui os
comentrios aqui desta div, e muito importante que a gente
coloque os comentrios.

E agora vamos criar entre este comentrio o que a gente vai
trabalhar, coloquei aqui o comentrio, vamos alterar para
fim.

P
g
i
n
a
3
3

Vamos pegar agora este bloco, que o bloco esquerdo,
exatamente o bloco de baixo, a gente vai utilizar os dois
blocos, o bloco e a imagem na verdade.

Vamos recortar o bloco da esquerda que o fundo, colar
remover borda.

Vamos agora no menu Modify>>Canvas>>Canvas Size.

E vamos colocar 1px.

Va em File, imagens Preview... vamos colocar PNG24 e
vamos salvar como, bg_box_central.png na nossa pasta
Imagens.

Vamos fechar esta pgina e agora vamos pegar esta outra
imagem.

Agora o mesmo processo que a gente fez, v no menu
File>>New, colar, tirar a cor do fundo.

P
g
i
n
a
3
4

Vamos exportar com o Image Preview como png32, que a
gente quer permanecer o background transparente.

Vamos salvar como bg_box_central_img, vamos salvar.

Vamos voltar aqui no nosso arquivo do nosso projeto e a
gente vai criar a nossa primeira <div>, que vai ser a <div
pai> vamos colocar <div id= box_sup_central> e vamos
fechar</div>, coloque abaixo um teste.

Agora a gente vai formatar esta div que fica ali em baixo da
multimdia, ou seja, o central, ele vai pegar de um lado
para o outro.

Vamos copiar est <div>.

Vamos formata-la no arquivo css.

Vamos colocar o height e tambm o background, com blue
para cor.

Vamos colocar a altura do nosso box que 260px.


P
g
i
n
a
3
5

No esquea de salvar Ctrl+S, e atualizar. E ai a gente vai
ser o seguinte problema, este box que a gente colocou azul,
ele fica por baixo das outras <div>, por baixo dos outros
blocos que a gente criou, o multimdia e o slide tambm, ele
deveria ficar em baixo, exatamente aqui, e ele subiu, ele
desapareceu, e no ficou no local aonde deveria ficar. Ele
tem que ficar exatamente abaixo destes dois blocos que o
slide e tambm o multimdia.
Vamos fazer um processo para resolver isto de forma muito
simples e muito praticar, ok. Vamos fazer o seguinte, vamos
abrir o estilo.css vamos criar uma classe clear, com clear
both; vamos salvar.

Vamos copiar o clear.

E agora a gente vai colocar esta classe em baixo desta <div>
multimdia exatamente depois deste fechamento desta
<div> que exatamente este bloco que a gente tem do lado
direito no nosso index.html.

Colocar <div class=clear> e vamos fechar tambm</div>.

No precisa ter nenhuma contedo dela, e uma <div> vazia,
vamos atualizar e o bloco desce como deve ser.

A gente pode trabalhar tambm o margin top_sup_central
no nosso estilo, desta forma o box vai se desprender dos
dois blocos superiores, pronto.

Afastou dos blocos superiores, e agora a gente pode dar
seguimento ao desenvolvimento do nossos blocos.

Dentro no nosso bloco sup, que vai ser exatamente a <div>
no bloco esquerdo, vamos copiar e acrescentar um bg, que
vai ser o background que a gente colocou primeiro, vamos
colocar aqui teste.

P
g
i
n
a
3
6

Vamos trabalhar a formatao desta <div> agora, que o
box_sup_central_bg, vamos colocar no incio o sinal de #,
vamos pegar aqui as dimenses, colocar 660px de largura,
temos tambm uma altura de 260px.

Ele vai ficar no lado esquerdo do jeito que a gente quer,
temos que trabalhar tambm com o background para ns
auxiliar, vamos l, background:orange; vamos clicar Ctrl+S.

Vamos voltar para o index.html e atualizar e t ai.

De qualquer forma, temos que trabalhar o float, mesmo que
ele esteja do lado esquerdo, e prudente que a gente coloque
o float left.

Vamos colocar agora o background que a gente criou
aquele filete de 1px, que foi exatamente a imagem que a
gente exportou, vamos tirar a cor Orange, vamos digitar url
ele vai acessar a nossa pasta imagens, vamos clicar na
imagem bg_box_central.png.

E agora a gente vai colocar aqui um repeat-x top, atualizar
e pronto,

Est aqui a imagem de background, a imagem que a gente
queria.

Agora, depois a gente vai trabalhar com o box do lado
direito, que o faceboook, o box que a gente vai ter que
redimension-lo, a gente vai ver isto depois por conta do
alinhamento do slide e do box da do lado esquerdo ento
este box direito vai ter que seguir o de cima e o box
esquerdo tambm vai ter que seguir o box do slide.

P
g
i
n
a
3
7

Vamos voltar aqui no nosso projeto, e agora vamos criar
uma nova <div> vamos tirar o texto que tnhamos colocado.

Vamos copiar est <div> de cima.

Vamos colar em baixo.

E colocar aqui um dois, sem numeral.

Colocar aqui um teste.

Vamos fechar est </div>.

Vamos copiar todo este contedo do nosso estilo.

Vamos mudar apenas o dois acrescentando _dois.

Vamos pegar agora o nome desta imagem que a gente
exportou, que e o outro background.

P
g
i
n
a
3
8

Por isto que a gente colocou uma <div> dentro da outra,
vamos colar aqui o outro background, modificar o repeat-x
para no repeat, remover o top e colocar right, e colocar o
top no final.

Temos aqui agora a predefinio do segundo bloco, Ctrl+S,
atualizar, e vamos ver o que aconteceu, ele foi para a direita
corretamente.
Tambm temos que trabalhar a borda deste bloco, ento
vamos copiar a cor da borda.

Vamos colocar no #box_sup_central_bg, que o bloco pai
digamos assim que fica no bloco esquerdo, 1px solido e com
a cor.

Se a gente aumentar o tamanho da borda, a gente tem que
fazer o redimensionamento na largura e no altura, ento
se a gente est aumentando 1px tem que tirar 2px na
largura que o que se refere 1px da esquerda e 1px da
direita, ento aqui vai para 658px e na altura tambm, a
gente vai colocar em cima e em baixo, ento a gente tem
que colocar 258px.

Agora sim a gente tem a borda no documento corretamente
empregado.

Vamos criar o bloco do Facebook, aonde a gente vai inserir
plugin.

Podemos colocar depois, melhor, antes do fechamento do
box central, porque ele vai ficar neste bloco azul que a gente
criou, o maior, vamos digitar <div id=, vamos fechar esta
</div>.

P
g
i
n
a
3
9

Vamos copiar o box_sup_central, e acrescentar facebook.

Voltando no nosso estilo, vamos copiar e vamos trocar
bg_dois pelo facebook, e agora trabalhar na dimenso
width.

Este bloco tem exatamente 334.

Vamos colocar o nosso width com 334px, vamos colocar
aqui tambm um height, com 260px.

Vamos colocar tambm um background, colocar aqui um
black.

No float, right, porque a gente vai flutuar este topo para,
este bloco.

Agora sim, o bloco foi para a direita aonde ele tem que ficar
em baixo do multimdia.

Mas ele est num tamanho diferente, ento a gente tem
que colocar este bloco da direita, assim como a gente vai
fazer no bloco que fica em baixo do slide, tem que seguir
exatamente o tamanho do bloco de cima, ento a gente vai
pegar o tamanho aqui da multimdia.

P
g
i
n
a
4
0

Vamos colocar no #box_sup_central_facebook o mesmo
valor no Width 323px que o tamanho de cima e ele fica do
mesmo tamanho.

Agora a gente vai fazer a mesma coisa para o bloco
esquerdo, que ele tem que ser do mesmo tamanho da
Picture, para poder alinhar, vamos tirar aqui o background
blue, para a gente poder acompanhar melhor.

Vamos trabalhar na dimenso do bloco left, vamos pegar
aqui e colocar um valor maior 668px.

Feito isto agora a gente est com o nosso projeto alinhado.

Vamos voltar no #box_sup_central_bg_dois e modificar o
width tambm com 668px e agora est correto, processo
resolvido.

Tudo OK.

Temos ainda que trabalhar com um paggind de 20px, no
#box_sup_central_bg_dois vamos fechar, Ctrl+S.

S que ai a gente tem que tirar 40px do width e tambm
20px do height, vamos modificar, salvar.

Vamos trabalhar na personificao do bloco direito, que vai
ser o do facebook, vamos voltar no Fireworks copiar este
bloco, vamos no menu New e colar, tirar a borda do bloco.

P
g
i
n
a
4
1

Vamos no menu Modify>>Canvas>>Canvas Size, vamos
colocar 1px no Width, aquele mesmo esquema que a gente
conhece, no imagem Preview... salvar como png 24 na
nossa pasta imagens, colocar aqui o nome,
bg_box_facebook.

Agora vamos personalizar o facebook incluindo o
background no lugar do black no
#box_sup_central_facebook colocando url../imagens /
vamos colar o nome do arquivo png repeat-x top, Ctrl+S,
atualizar.

E ai atualizou.

Vamos colocar agora uma borda neste bloco do facebook, e
ai a gente vai ter que trabalhar com o redimensionamento
tambm com 1px solido com um cinza.

Vamos diminuir 2px da largura e da altura tambm, porque
so dois lados, em cima e em baixo.

Atualizamos, resolvido.

Ento a gente tem o bloco do facebook criado, o nosso
projeto j dando seguimento, temos aqui o bloco esquerdo
que a gente vai colocar o contedo posteriormente, que o
contedo com as informaes dos nossos cursos que

P
g
i
n
a
4
2

exatamente este bloco aqui da esquerda e tambm temos o
espao para incluir o plugin do facebook.
Modulo 3 23. Organizando fotos do bloco superior central
Dando procedimento ao curso vamos terminar a
formatao dos blocos centrais superiores, a gente vai criar
um ttulo, cabealho, em teste, a gente vai trabalhar o <h1>

Vamos colocar este texto no lugar de teste.

Agora vamos criar um pargrafo, colocar o texto que ns
temos aqui, Ctrl+S, atualizando.

O nosso projeto fica desta forma.

Vamos pegar agora o box_sup_central_bg_dois e fazer uma
formatao tanto no <h1> quando no pargrafo <p>,
exatamente este aqui, box_sup_central_bg_dois.

Vamos colocar abaixo dele uma cpia, fechar, depois do
dois colocar ESPAO E h1.

Vamos formatar aqui, color, colocar exatamente esta cor:
#B25900, font-famlily, fazer um teste aqui com a Georgia,
Arial, Verdana, vamos colocar aqui tambm font-style
itlico, diminuir um pouco a fonte, colocar 25px.

Ficou legal.

Agora a gente vai fazer cpia de novo do
#box_sup_central_bg_dois e colar abaixo, vamos colocar o
p aps o dois.

P
g
i
n
a
4
3

Vamos colocar 13px no font_size, a cor vamos colocar a
mesma do h1.

Neste caso vamos permanecer assim porque a gente vai
fazer depois a personificao de cor e se a gente colocar
uma cor geral no bloco pode dar problemas.

Agora a gente vai criar 3 <div> porque se a gente for
trabalhar com a lista, a gente pode ter problemas com esta
imagens que a gente vai colocar aqui em cima da imagem
de baixo, e tambm com o bloquinho que vamos trabalhar
com o png, ento a gente vai criar <div> para ficar melhor
para trabalhar.
Se
voc puder criar com a lista, bem melhor. Vamos criar uma
<div> pai, que vai ser a <div> fotos.

e ai a gente cria outra <div> e coloca foto_esquerda, cpia e
cola abaixo e coloca, foto_meio, e cpia e cola abaixo
tambm e coloca foto_direita, dar um enter para dar
espao entre as <div>.

Ento criamos foto, esquerda, meio, direita, salvar.


P
g
i
n
a
4
4

E agora vamos criar esta <div> na folha de estilo incluindo a
formatao, vamos colocar depois do pargrafo, j que se
trata no mesmo bloco.

Vamos colocar o tamanho correto, eu vou desagrupar para
saber O TAMANHO correto.

Que Width: 186px por Height: 138px,

Vamos colocar essas medidas no nosso estilo, e ai a gente j
tem o tamanho do bloco esquerdo.

Vamos colocar background coma cor Orange e um float left.

Vamos copiar e colar aqui em baixo, colocando meio no
lugar de esquerda.

Mudando o Orange para o purple.


P
g
i
n
a
4
5

Vamos copiar novamente e colocar direita, colocando uma
cor red.

Vamos salvar e temos o nosso bloco como podem ver,
vamos atualizar nossa pgina e o nosso Bloco esta criado.

Ns colocamos um float na esquerda para todos, ento a
gente vai ter que fazer o seguinte, vamos pegar a direita e
colocar o float rigth.

Ele colocou este bloco no limite.

Agora a gente vai trabalha aqui a <div> do meio com o
margin, na esquerda vamos colocar 35px.

Vamos fazer uma conferncia, a gente pode at fazer
clculos, mais eu confio mais na conferncia pelo prprio
fire<iwork, que ai a gente tem uma posio mais exata, so
detalhes que vocs podem trabalhar, ento eu costumo
criar um bloco, vamos colocar a largura de 35px, para ver se
os nossos blocos esto corretamente alinhados.

Agora a gente vai inserir nossas imagens, eu j tenho as
imagens nestes tamanhos do bloco, ento a gente vai
inserir no modo cdigo mesmo.

Vamos procurar em imagens, temos aqui foto 1.

P
g
i
n
a
4
6

Vamos copiar, colar no meio como foto2 e aqui como foto3,
Ctrl+S, e ai a gente insere as fotos nos devidos lugar
lembrando que A IMAGEM TEM que ter o mesmo tamanho
dos Blocos, no nosso caso elas devem ter width: 186px e
Heigth: 138px.

Antes tnhamos criado a id fotos.

Agora vamos criar o nosso estilo #fotos antes dos estilos
que a gente criou, foto direita, esquerda, vamos colocar um
margin top, para poder afastar as nossas imagens do texto
acima, vamos deixar mais ou menos o espao que a gente
precisa, colocar 32px. Lembrando que essa medida de
acordo com o nosso projeto do Fireworks.

Resultado parcial.

Modulo 3 24. Inserindo boto de Play sobre as fotos com
position
Vamos agora criar os blocos com as informaes em cada
foto, antes disto, vamos copiar bloco transparente que a
gente tem no projeto do Firewoks.

Vamos colar em um novo documento, e tirar a cor de fundo.

P
g
i
n
a
4
7

Vamos modificar esta imagem para width:1px por
height:1px, no menu Modiy>>Canvas>>Canvas Size at ficar
apenas 1 pontinho.

V agra no menu File>>New>>Imagem preview... PNG 32
para manter a transparncia e a gente vai colocar
bg_alfa_titulo.

Vamos agora aqui, criar em baixo da foto, um <h2> para
no ter problema com o <h1> criado a cima.

Agora vamos copiar o texto D um passo a frente no
nosso projeto do Firewoks.

E colar no nosso <h2>.

Vamos fazer a mesma coisa, copiar e colar o <h2> na <div>
referente a foto do meio e tambm na foto da direita,
vamos renomear para, Chegou a hora de se qualificar! e Os
melhores cursos esto aqui.


P
g
i
n
a
4
8

Vamos atualizar e ai a gente teve a incluso desta forma
sem a formatao.

A gente vai trabalhar a formatao deste <h2>, vamos no
estilo do #foto_esquerda e colocar um position relative.

Vamos fazer isso tambm para fotos_meio e fotos_direita.

Vamos atualizar para ver como ficou.

Como a gente est utilizando <h2>, porque se eu fosse
trabalhar no <h1>, eu teria que criar um cabealho de nvel
1 para foto direita, esquerda e meio. S que como estamos
trabalhando no <h2>, podemos pegar e copiar e colar o
box_sup_central_bg_dois h1 abaixo e ai a gente trabalha o
<h2> dele.

Porque ele vai pegar exatamente qualquer cabealho de
nvel 2 dentro do bloco, como a gente vai utilizar somente
aqui, ento a gente pode criar um padro aqui no <h2>.

Vamos agora fazer alguns detalhes, vamos colocar o
font_size o color e position absolute.


P
g
i
n
a
4
9

Vamos atualizar e o nosso ttulo posicionado exatamente
em cima.

Vamos colocar um tamanho, vamos ver o tamanho que
utilizamos na nossa barra no projeto do Fireworks, 178px de
Width e 25px de Height, vamos tambm colocar um
background e vamos trocar a cor do nosso texto para
branco, s para entender como vai funcionar.

Exatamente desta forma.

Vamos trabalhar aqui o padding, colocar um padding de
4px e aumentar um pouco o espaamento em cima e em
baixo, 10px em cima, e para baixo, na direita e esquerda
4px.

Agora a gente vai trabalhar o background para ficar
transparente, como a gente vai fazer isto aqui? A gente j
tem um background aqui, s colocar a url, vamos colocar
../imagens/ e vamos pegar a imagens que a gente salvou, a
imagem transparente, vamos procurar aqui em site,
imagem, bg_alfa_titulo.png, no precisa colocar o efeito de
repetio, porque ele j faz isto automtico, ele cria ai a
transparncia, vamos diminuir o tamanho dele porque ficou
muito grande, colocar 15px no height.

Agora ele ficou no tamanho correto.

Ento t quase feito ai o que a gente pretende, a gente tem
que colocar aqui, ver se fica legal um font-weight: bold,
como a fonte est com um erro no acento vamos colocar
tambm uma font-family: Verdana, "Times New Roman";.

P
g
i
n
a
5
0

Vamos ver o resultado.

Vamos dar um printscreen, vou abrir uma nova tela, e vou
ver o espao que precisa aqui para poder criar um
background, melhor, incluir a imagem com o play, a gente
pode ver exatamente o espao que a gente precisa aqui.

Eu preciso desta dimenso aqui.

Vamos copiar e colar no novo documento com as mesmas
medidas.

Vamos colocar transparente o fundo, vamos colocar
exatamente no meio a nossa imagem do boto play que
vamos copiar do nosso projeto do Fireworks, que tem a
medida de 50px por 50px.

Vamos agora no menu File>> imagem Preview... PNG32.


P
g
i
n
a
5
1

Vamos salvar e colocar o nome play.

Vamos fazer o seguinte, abaixo da <div
id=fotos_esquerda> a gente vai inserir uma <img
src=imagens/play.png/> e assim inserimos a nossa
imagem do boto play.

Vamos colocar tambm uma class=play.

Vamos agora criar a class play, abaixo do
#box_sup_central_bg_dois h2 no nosso estilo,
.play{position:absolute;.

O play fica exatamente em cima da imagem.

Vamos copiar esse linha do cdigo e repetir este processo,
para a outras imagens, colocando em cima da imagem
padro, que na verdade, so as fotos, Ctrl+S.

Temos o boto de play em cima das imagens.

A gente vai ver no prximo modulo como a gente vai fazer
para customizar este efeito de selecionar a imagem, a gente
vai criar um alfa no play e quando selecionar ele vai criar
um efeito de alfa, muito bacana, a gente teve ai a
organizao das fotos do nosso projeto.
Modulo 3 - 25 - Criando transparncia nos botes de Play
com opacity
Vamos criar o efeito alfa, utilizando o boto do play, a
gente vai colocar tambm na imagem do play os nossos
links, vamos colocar com # por enquanto.

P
g
i
n
a
5
2

Vamos colocar este link em todas as imagens, Ctrl+S, para
salvar, e a gente criou o link para os botes.

A gente vai colocar agora as imagens que esto com o links,
dentro de um <span>, colocamos o <span> antes dos a
<href> e fechamos o </span>.

Vamos repetir o processo para as outras duas imagem.

Vamos agora no nosso estilo.css. Como o link s estamos
utilizando nos botes, a gente no vai colocar o link em
outra imagem deste bloco, a gente pode trabalhar a
imagem junto com o <span>, no box_sup_central_bg_dois,
mas caso a gente fosse colocar outra imagem neste bloco e
trabalhar o link nesta imagem, a gente teria que criar
dentro dos blocos da imagem. Ai seria uma coisa mais
individual.

Vamos copiar o box_sup_cetral_bg_dois, vou remover o
contedo e vou colocar um span a, que o efeito de link
sem nenhum evento.

Vamos colocar abaixo o opacity 0.5; que significa 50%,
vamos colocamos filter: alpha, abre parnteses, opacity =
60, porque na verdade, quanto trabalhamos com filter,
temos que colocar 10% a mais do que o prprio opacity,
ento a gente vai fechar parnteses, vamos salvar e
atualizar.

Criamos a transparncia no boto, ento isto bacana
porque a gente no precisa criar este efeito de
transparncia na prpria imagem no Firework ou em
qualquer outro editor.

P
g
i
n
a
5
3

Vamos copiar o bloco de cima e a gente vai fazer o efeito ao
contrrio para o evento a:hover.

Vamos trocar a opacity para 1 e 100 no filter, a gente utiliza
tambm o opacity como o filter para que este efeito
funcione na maioria dos navegadores, ok.

Vamos atualizar e quando passarmos a seta do mouse no
boto ele vai ficar da forma real, da forma nativa dele que
nesta cor, ento voc pode incrementar o seu projeto
trabalhando com filter e opacity sem a necessidade de
efeito na prpria imagem.

Modulo 3 - 26 - Inserindo plug-in do Facebook no site
Vamos inserir a caixa do plug-in do facebook no nosso bloco
do facebook, vamos acessar na guia de endereo do nosso
navegado: developers.facebook.com.

Clicaremos em documentao.

Logo na primeira opo, temos o Social Plug-ins, clicamos
no Social Plug-ins.

Vamos at Like box.

Agora voc tem como efetuar as configuraes da caixa do
facebook, voc pode pr o caminho da pgina que voc
quer usar, no caso eu vou colocar o da micromax cursos, ele
j aparece aqui em um Preview.

P
g
i
n
a
5
4

Voc pode tambm colocar aqui a dimenso e ai no caso a
dimenso que iremos utilizar no facebook, no nosso estilo
temos a medida de 321px, vamos colocar no width da
configurao do Box do Facebook essa medida, 321px.

Temos como escolher a cor de base por exemplo, se o seu
site for preto, voc pode colocar uma cor mais escura, no
nosso caso vamos colocar light.

Temos a opo de exibir ou no a foto de quem est
seguindo a sua conta no facebook, atravs do Show faces, o
show stream, ele vai fechar as ltimas informaes postada
na sua conta, e se voc quiser, voc tambm pode remover
o topo na opo show header e para finalizar temos o show
Border, para as bordas, vamos permanecer o topo.

Vamos ver agora o Get Code, na opo iframe vamos copiar
o cdigo Ctrl+C, voc tambm pode copiar o cdigo de
XFBML que para o javascrips, mais vamos optar por copiar
o iframe.

Feito isso vamos abrir o Dreamweaver e procurar aqui a
caixa do facebook.

Vamos deletar o texto facebook e colar o nosso cdigo.

Se voc quiser voc ainda pode acertar a dimenso da
altura.


P
g
i
n
a
5
5

Voc tem que confirmar se a altura e a largura esto de
acordo com o seu projeto, no nosso caso temos o Width
com 321px e Height com 258px, sem esquecer que h duas
combinaes de altura e largura.

Agora vamos fazer o teste e a caixa j e exibida na
dimenso que a gente precisa.

Est caixa j tem uma borda, t um pouco sem sintonia, o
que a gente vai fazer? A gente vai fazer na folha de estilo,
aonde a gente tem o facebook.

A gente vai pegar e tirar a borda.

Mas se a gente tirou a borda, a gente tem que aumentar o
tamanho do box, ento vamos colocar 323px no width e
261px no height.

Voc pode ver que o aumento e o bloco do facebook j est
adicionado no nosso projeto.

Modulo 3 - 27 - Inserindo vdeo embed(incorporar) no site
Assim como ns fizemos com o facebook ns poderamos
por exemplo, incluir aqui no lado direito, um cdigo embed
(INCORPORAR) PARA a exibio de um vdeo.

Por exemplo, vou acessar aqui o youtube, vamos buscar um
vdeo, ns temos aqui um vdeo sobre o curso de Games.

Vamos trabalhar no bloco multimdia do nosso estilo, ns
temos aqui as medidas, 323px de Width por 259px height.

Clicando em embed(incorporar) no Youtube, ns teremos o
cdigo iframe.


P
g
i
n
a
5
6

Tenho como customizar a dimenso, vamos colocar 324px
de width, e ai ele j dar uma valor mais ou menos aceitvel.

A gente j pode copiar este iframe vamos colar no local da
imagem multimdia, vamos modificar para 323px o width,
clicamos em Ctrl+S .

Vamos fechar e o vdeo inserido.

S que em relao a proporo deste vdeo, voc pode
observa que ele inserido s que bem menor, por que que
isto acontece? Isto acontece por conta da resoluo do
vdeo que foi enviado para o youtube, ento est proporo
indicada para o youtube para no ter bordas no vdeo, por
exemplo, se eu colocar exatamente a altura que a gente
coloca nesta caixa multimdia 259px.

Vamos alterar o height para 259px, no nosso iframe no
index.

Olha o que vai acontecer com o vdeo, ele fica com duas
borda, uma em cima e outra em baixo, se eu clicar no play
vocs vo poder observar a borda de baixo, ento fica muito
feio voc colocar um vdeo e uma borda.

Ento muito importante voc colocar o tamanho indicado
pelo o youtube.

Vamos atualizar, e ai ficou exatamente deste tamanho.

Vamos ter que criar uma alternativa, ou a gente colocar
uma imagem esttica com vdeo ou inserir o vdeo direto
aqui. S que o legal desta pgina, poder oferecer para o
visitante uma interao e de certa forma at um movimento
no slide como temos no slide. Ento o que ns vamos fazer,
a gente vai diminuir o tamanho do bloco do vdeo e colocar
outra coisa interessante aqui do lado direito, ok. Vamos
colocar 182px no height do nosso estilo multimedia.

Vamos atualizar.


P
g
i
n
a
5
7

A gente vai criar uma caixa, e colocar neste espao vazio,
depois a gente decide o que colocar, de repente alguma
coisa til que tenha sido solicitado pelo o cliente.

Vamos criar abaixo do estilo multimedia, o
multimedia_dois.

Podemos colocar um espcie de player de pudcast caso voc
queria alm de colocar um vdeo institucional na sua
empresa, voc queria um udio ou alguma coisa
interessante. Vamos Colocar Width com a mesma medida
do primeiro multimedia com 323px, o height: com 50px e
copiar o mesmo float e background do 1 multimdia.

Vamos criar agora este <div> no nosso index em baixo do
multimdia, <div id=multimedia_dois> </div>.

Vamos colocar, um comentrio com o nome de <! - -inicio,
multimedia_dois - -> e depois a gente coloca abaixo com o
fim.

Tem algumas <div> que a gente tem que fazer o
comentrio, a gente tem que comentar, inclusive comentar
tambm as folha de estilo, mais isso fica para uma outra
hora, vamos colocar s no nosso multimedia por enquanto,
vamos atualizar e ai ficou apareceu l o nosso multimedia
dois, s tem um problema ele ficou muito colado.

Vamos colocar no estilo multimedia de cima, uma margin,
colocar 0 0 8px 0;.

Vamos atualizar e ai a gente afastou um pouco.

P
g
i
n
a
5
8

Podemos trabalhar tambm a altura do nosso multimdia
dois vamos colocar 68px.

Vamos tirar a prova com o printscreen e vamos abrir um
novo documento no Fireworks e colar este printscreen para
ver se as medidas esto corretas, fica aqui uma dica bacana
que vocs vo levar para a vida durante o desenvolvimento,
existe algumas ferramentas, alguns plug-ins para
navegadores que consegue medir e tudo mais, mais eu
costumo fazer no olho mesmo, por exemplo, aqui no ficou
correto.

Ento temos que aumentar um pouco mais, colocar 70px
aqui, vamos atualizar, agora novamente, printscreen e
agora vai ficar tudo certinho e ele fica alinhado.

Colocamos nosso vdeo um uma proporo correta,
colocamos um box que a gente vai decidir daqui a pouco,
temos vrias possibilidade para este box, nosso vdeo est
funcionando como vocs podem ver.

Modulo 3 - 28 - Inserindo bloco de redes sociais no site
muito comum ocorrer mudanas no decorrer do projeto,
quando a gente foi inserir o vdeo do lado direito a gente viu
a necessidade de criar mais um bloco abaixo do vdeo, claro
que se voc quiser aproveitar toda esta parte que a gente
tinha anteriormente para incluir o vdeo, voc cria um vdeo
com outra dimenso, mas muito factvel que em muitos
projetos alguns detalhes podem ser alterados, at para
melhorar a acessibilidade do prprio projeto. Por exemplo, a
gente utilizou o problema com o vdeo para resolver uma
questo que a visualizao das redes sociais.

Podemos dar mais destaques aos canais no caso da rede
social da empresa, no caso a Micromax colocando os cones
exatamente no bloco que a gente criou abaixo do vdeo.

Vamos voltar ao nosso projeto do Fireworks vamos tirar a
rede social que estava embaixo e inserir a rede social em
baixo do bloco do vdeo, vamos pegar o tamanho aqui que a
gente colocou para multimdia 182px de altura e vamos
aplicar no box do vdeo.

P
g
i
n
a
5
9

Vamos colocar o play um pouco mais para cima.

Criaremos um bloco aqui em baixo, copiando e colando
mais abaixo o bloco do vdeo, ele tem 70px de altura ento
basta eu colocar 70px no height e alinhar ele aqui com a
picture, ok.

Vamos fazer o seguinte, a nossa rede social vai subir, vou
colocar exatamente abaixo do video dentro do box que
criamos.

Podemos inclusive criar um efeito, vamos as possibilidade
de colocar aqui mais ou menos a forma que a gente est
projetando.

Eu criei anteriormente um espao desnecessrio com aquele
efeito reflexo e ai a gente pode resolver, muito simples,
colocando aqui para cima todo texto rodap e a rea do
cliente, vamos deletar tambm os reflexos.

Vamos acrescentar copiando e colando ao lado o nosso box
arredondado da nossa propaganda.

Criamos um bloco semelhante a este bloco da esquerda,
Vamos manter o mesmo style dos outros blocos, pronto.

Criamos uma harmonia neste bloco aqui que o bloco
inferior central.
Vamos fazer uma modificao neste rodap, olha como os
detalhes fazem a diferena no projeto, vamos no menu
Modify,>>Transform>>Flip Vertical.

P
g
i
n
a
6
0

S que se eu colocar ele um pouco para a cima, olha que
legal, a gente vai dar um visual bem bacana no projeto que
estamos fazendo, inclusive esta linha aqui pode ser
expandida, ok.

Ento a gente dar uma arrumao no rodap, a gente pode
at colocar algumas imagens do lado direito para no ficar
muito vazio, colocar para cima aqui a logomarca, o texto
tambm.

Agora a gente vai trabalhar na rede social.

Vamos voltar no nosso projeto no Dreamweaver na nossa
folha de estilo, no estilo multimdia_dois ele vai morrer, a
gente vai colocar aqui social, vamos clicar em Ctrl+S.

Obviamente ele vai perder a formatao, mas ai a gente vai
no cdigo fonte no index, procura aquele multimdia_dois e
coloca social, salva e tudo volta ao normal.

Vamos pegar a nossa imagem da barra da rede social,
vamos copiar Ctrl+C, vai no menu File>>New.

Cole neste novo documento, vamos tirar a borda, menu
Modify>>Canvas>>Canvas Size, 1px.

O mesmo processo que a gente fez, vrias vezes no decorrer
do nosso projeto Menu File>>Image Preview, vamos colocar
PNG24, vamos salvar com o nome de bg_social.

E ai a gente vai agora efetuar a formatao do nosso estilo
do social, primeira coisa que a gente vai colocar uma
borda, deixa eu voltar no nosso projeto do Fireworks e eu
posso pegar aqui ampliando, a cor da borda.

P
g
i
n
a
6
1

Vamos digitar border: 1px solid #DEDEDE.

Sabemos que quando colocamos uma borda em todo o
canto, temos que fazer uma alterao na altura e na
largura, se eu colocar uma borda somente na esquerda e
direita, eu tenho que mexer somente na altura, a gente vai
tirar 2, e colocar 321px e aqui 68px.

Vamos atualizar, ele est com a borda aqui, a gente no vai
ver por causa do background, se a gente remover o
background, vocs vo ver que ele est com a borda. Vamos
colocar agora a nossa imagem do box-social, vamos colocar
no background a opo url(. ./imagens/bg_social.png)
repeat-x top.

Vamos atualizar, ai est o bloco que a gente est
acostumado a trabalhar no nosso projeto

Bom a gente agora vai criar os nossos cone. Vamos criar
um novo documento no Fireworks para organizar os nossos
cones.

Vamos desagrupar os nossos cones, v em menu
Modify>>ungroup.

Vamos coloca-las atrs uma das outras, vamos selecionar
todas e alinhar a esquerda.

Vamos ajustar os nossos icones, Modify>>Canvas>>Trim
Canvas.

P
g
i
n
a
6
2

Temos aqui os nossos cones alinhados.

Clique em Cut para remover o facebook, vamos deletar o
restante e colar o facebook de volta.

Clique no menu File>>Imagem Preview... Vamos salvar com
a extenso png32, com transparncia, porque ele vai ter um
background.

Vamos salvar como, facebook_icon.

Vamos clicar em Ctrl+Z at colar tudo novamente, agora
vamos fazer a mesma coisa com o fliker, deleta, cola, vou l
no background, imagem Preview... png32 fli_icon, e fazendo
o mesmo processo, s dar Ctrl+Z que os cones voltam.

Clique em Ctrl+X Ctrl+A, delete, agora vamos exportar o
twitter_icon.

E agora os ultimo, youtube_icon e feed_icon.

Vamos criar agora dentro do nosso projeto no
Dreamweaver, est lista dentro da social, colocando <ul>,
fechando </ul>, dentro vamos colocar <li>, vamos fechar o
</li>, a gente ainda cria dentro do <li> um <a href> e vamos
colocar a nossa primeira imagem, que vamos puxar do
browser, colocar na ordem aqui que a gente tem no projeto.

Colocamos o facebook em primeiro, vamos clicar em Ctrl+S,
o facebook vem parar aqui.

Vamos copiar esta linha toda, colar abaixo e o prximo da
fila o fliker.

Agora vamos colar tambm, o prximo o twitter, depois
vem o youtube e para finalizar o feed, Ctrl+S para salvar.

P
g
i
n
a
6
3

Ficaram todos aqui em baixo.

Podemos resolver todos criando abaixo do social na nossa
folha de estilo o social ul li.

Vamos colocar o seguinte dentro do nosso social ul li,
display:inline;

A gente coloca tudo alinhado.

Vamos criar tambm antes do ul li apenas o social ul, dentro
colocamos colocamos a margin 0 padding 0.

E ai colou tudo aqui.

Vamos afastar um cone do outro e ai no social ul li a gente
coloca o margin com o left de 15px.

Agora sim, a gente afastou corretamente.

S que agora o seguinte, a gente tem os cones colado um
pouco na parte superior do box, a gente pode resolver isto
no prprio social, colocando, um padding top de 15px e ai a
gente vai mudar a altura de 68 para 52px que exatamente
68 -14.

S que eles centralizaram na vertical, a tem que centralizar
na horizontal, quando a gente trabalha com listas um
pouco complicado fazer este processo, afastando os cones
aqui, mas no daria muito certo e ai a gente trabalha no
social somente na posio horizontal, position: relative;.

E no social ul colocamos o position:absolute;, e ai eu posso
colocar o right com 24px e ele vai colar l na direita, colocar
um top:14px e ele fica centralizado, se a gente aumentar
aqui o Browser, ele fica centralizado, e como este bloco ele
j est com os valores fixo, voc no tem o deslizamento
destes cones.

A gente tem o efeito do link, a gente vai copiar o social ul li,
vou colocar o a depois do li, vou colocar o efeito de
opacity:0.5 filter:alpha(opacity = 60), vamos salvar.

P
g
i
n
a
6
4

A gente cria um alfa nos cones.

Vamos copiar o social li a e colar abaixo, vamos colocar
depois do a o hover, vamos deixar os valores.

Vamos voltar no social ul li a vamos trocar a opacity para 1
e o alpha para 100.

Ento, antes de voc passar a seta do mouse, sobre a
imagem, sobre os cones, passou e ai ele fica com alfa.

Modulo 3 - 29 - Criando bloco central inferior parte 1
Vamos criar agora o nosso bloco central inferior, que
contm a informao dos nosso cursos como Design/Web,
Desenvolvimento de Games , alguns outros e aqui tambm
um box com informaes de notcias, bom a gente j sabe
de como a gente fez alterao de tamanho nos box do lado
direito, obviamente este box deste lado vai ter alterao
tambm, s que antes a gente vai trabalhar no
desenvolvimento do bloco geral, ento vamos criar no nosso
index, depois do fim do box central superior que
exatamente o blocos que contm o facebook e as solues,
ento depois do fechamento e antes do fechamento do box
pai a gente vai criar a <div id=box_central_inf></div>.

Vamos abrir a nossa folha de estilo e aqui a gente coloca
antes do rodap o estilo da nossa nova <div>,
#box_central_inf vamos colocar uma altura de 200px, que a
gente tem aqui s no tamanho dos box do projeto do
Fireworks 181px, ento vamos colocar height:200px, vamos
colocar uma cor de fundo background:orange,

Vamos salvar o nosso estilo e nosso index, agora a gente
tem o nosso bloco central.
Vamos trabalhar o mangin top 8px, para afastar do blocos
superiores, e a gente consegue fazer o afastamento.

Vamos criar 3 <div> que vai ser a <div> que vai conter o
bloco direito, o bloco esquerdo e o meio, vamos criar dentro
do box central_inf, vamos deletar o texto central, e colocar
<div id=box_central_inf_esque></div>, vamos colocar
uma abaixo da outra, s vamos trocar para meio e direita e
colocar entre as <div> os Textos Esquerda, Meio e Direita.

P
g
i
n
a
6
5

Vamos criar na nossa folha de estilo antes do rodap
tambm depois do box_central_inf um
#box_central_inf_esquerda, na esquerda vai ter uma
dimenso de 320px, no width que tem a mesma medida do
nosso projeto do Fireworks, e o height vai ser de 181px,
vamos flutuar antes a esquerda colocando um float a
esquerda, ento temos os tamanho 320 de largura, altura
181px, vamos flutuar a esquerda e para finalizar um
background com a cor purple.

Vamos copiar aqui, colar abaixo, modificar para meio, vai
ser a mesma dimenso, s que de outra cor, vamos colocar
red.

Vamos copiar, colar, abaixo e vamos modificar para direita.

Diferente do nosso layout que tem uma dimenso de 334, a
gente vai ter que colocar exatamente o tamanho do
facebook e do vdeo, ento por exemplo, se eu pegar a
medida do facebook, a gente tem aqui 321px de largura,
ento a gente trabalhar na direita com 321px, vamos trocar
a cor para green.

Vamos ver se vai ficar tudo ok. Atualizar.

S que a gente tem que flutuar neste caso aqui para a
direita no float vamos colocar ento right, direita tem que
ficar na direita, vamos aumentar um pouco mais e colocar
no width:323px.

P
g
i
n
a
6
6

Por causa do ajuste que a gente fez, ele vai ficar deste
tamanho, a gente atualiza agora.

Vamos dar um print, podemos colar em um novo
documento no Fireworks e observar que t alinhado
corretamente.

Vamos afastar agora o bloco da esquerda, a gente pode
trabalhar tanto na esquerda quanto no meio, mas vamos
trabalhar na esquerda com o margin com 18px a direita.

Ento a gente tem ai os 3 blocos, o bloco da esquerda, o
bloco da direita e o bloco do meio, no prximo modulo a
gente vai comear o processo de formatao
personalizao dos 3 blocos.

Modulo 3- 30 - Criando bloco central inferior parte 2
Vamos trabalhar a formatao dos blocos, a gente tem um
tamanho de 320px no projeto fireworks.

E temos 320px no box_central_inf_esquerda na nossa folha
de estilo.

Com o Shift pressionado, vou clicar nos cones dos
programas web e clicar tambm no fundo no nosso projeto
do fireworks, Ctrl+G para agrupar.

Vamos clicar em Ctrl+C v no menu File>>New, vamos ter
328, por que?

P
g
i
n
a
6
7

Porque este style cria uma espcie de espao entre o box e o
contedo externo.

Ento vamos colocar 318px para no ter problemas, menu
Modify>>Canvas>>Canvas Size, 318px de largura.

Vamos ajustar para ficar certinho o nosso BOX vai ter 318px
por 181px, agora sim voc pode ver a borda.

Vamos desagrupar e salvar o nosso box, menu
File>>Imagem Preview..., PNG 32, no esquea de colocar o
background transparente.

Vamos colocar bg_center_inf_esquerdo, vamos agora
colocar este background na esquerda.

Digite depois do background: url (.
./imagem/bg_center_inf_esquerdo.png) no-repeat center
top; Ctrl+S.

Vamos atualizar e ai a gente tem a nossa imagem.

Vamos voltar no projeto do Fireworks, pegar aqui o nosso
rob do UDK clicar em Ctrl+C, e colar agora no lugar dos
cones do curso de Web.


P
g
i
n
a
6
8

Vamos salvar no imagem Preview e modificar apenas o
nome, que bg_center_inf_meio, e agora temos o Box da
direita, que tem 318px.

Vamos copiar o background da esquerda e colar no
box_central_inf_meio alterando a opo para meio no lugar
de esquerda no nosso estilo.

Vamos remover o nosso rob do UDK, e colocar a menina no
computador.

Vamos colocar a medida de 321px de largura pois como
visto anteriormente este box um pouco maior que os
outros vamos alterar essa medida no Fireworks.

Vamos salvar em File>>Imagem Preview>>PNG 32.

Vamos salvar com o nome de bg_center_inf_direita.png.

Vamos copiar a linha do background do nosso estilo e colar
no box_central_inf_direita, renomeando para a direita.

Vamos atualizar e o background tambm e inserido aqui na
direita.

Se eu remover este background Orange do box_central_inf,
vocs j vo ver a diferena.


P
g
i
n
a
6
9

Pronto, a gente j tem ai os 3 blocos.

Vamos trabalhar na formatao destes 3 blocos. Primeiro
passo alinhar este bloco com o margin, vamos pegar
ento o da esquerda, o margin aqui da esquerda, a gente
vai colocar margin: 0 30px 0 0; pronto.

Vamos tirar um printscreen.

Vamos ver se est certo o bloco, s que o seguinte, a
gente viu que um pedao da imagem na largura no veio a
borda, a gente tem que colocar 320px na largura dos nossos
Box no Fireworks, vamos abrir os box e clicar no menu
Modify>>Canvas>>Canvas Size e alterar as medidas.

Vamos salvar e atualizar para ver a alterao.

Ento ns temos os nossos 3 blocos, vamos criar agora um
bloco dentro de cada bloco deste, ento eu vou ter que tirar
o texto esquerda, vou criar aqui <div
id=box_central_if_esquerda_interna> </div>e ai dentro
deste bloco eu vou colocar o texto.

Vamos colocar <h1></h1> que o nosso ttulo com o nome:
DESIGNER/WEB.

E este texto dentro de pargrafo, <P>O curso direcionado
para profissionais que desejam desenvolver carreira de
webdesigner e planejar, criar, produzir e administrar
websites.</p> vamos salvar.

O contedo est aqui e a gente vai ter que trabalhar agora
na personificao.

Vamos agora copiar esta linha
box_central_esquerda_interna, e vamos l no estilo, colar

P
g
i
n
a
7
0

abaixo do box_central_esquerda, j que uma filha da
box_central_esquerda, obs: No deixe de colocar o sinal de
# no comeo.

Vamos comear a modificar width 200px, float: right, text-
align: center;, padding:10px 0 0; vamos salvar.

Vemos que j coloca o nosso texto do lado direito.

Vamos colocar mais 3px na largura do padding.

Vamos personalizar o <h1>, vamos colocar abaixo o
#box_central_inf_esquerda_interna h1, colocar a cor do
ttulo que usamos no fireworks, #B20000, vamos colocar
20px no font size, vamos colocar tambm um text-
transform:uppercase, para colocar tudo maisculo.

Vamos atualizar e ver como ficou.

Vamos personalizar tambm o nosso pargrafo, digite
abaixo #box_central_inf_esquerda_interna p, vamos
colocar font-size:13px, vamos colocar a mesma cor do
projeto do Fireworks: color: #444444.

Est mais ou menos do jeito que a gente quer.

A gente vai ter um boto abaixo tambm, vamos pegar o
boto do nosso projeto do Fireworks, clicar em Ctrl+C.


P
g
i
n
a
7
1

Vamos no menu File>>New.

Vamos ajustar o boto para ter um espao menor, no
esquea de ver se o fundo est transparente, vamos salvar
no menu File>>Imagem Preview como png 32 para
salvarmos com fundo transparente, com o nome de boto.

A gente vai colocar o boto depois do pargrafo, vamos
colocar o Link: <a href=></a> dentro vamos colocar a
nossa imagem do boto: <img
src=imagens/botao.png>vamos salvar.

O boto fica exatamente assim.

Vamos l, agora a gente vai fazer uma configurao da
seguinte forma, este box_central_inf_esquerda, sem ser o
interno, a gente vai colocar uma position:relative.

Vamos agora criar um span para engloba todo o span que
tiver no box_central_inf_esquerda digite #
box_central_inf_esquerda span, assim a gente engloba
absoluto no position.

Vamos colocar por enquanto o botton:0.

Vamos colocar o right:0;.

P
g
i
n
a
7
2

Vamos voltar no nosso index e colocar a nossa imagem do
boto em um <span>, porque ele vai pegar aquele position
que a gente declarou, vamos fechar o </span>.

Vamos colocar um a depois do span no #box central inf
esquerda span e ai ele vai ficar assim #box central inf
esquerda span a.

Vamos salvar e atualizar.

Agora podemos trabalhar, vamos colocar o botton: 20px e o
right com 15px.

Agora ficou exatamente aonde a gente quer, mesmo que o
tamanho do pargrafo aumente um pouco mais, vamos
fazer o seguinte, vamos tirar este estilo de pargrafo,
porque ele est pegando a esquerda interna.

Vamos englobar tudo aqui no #box_central_inf p, que a
central inferior, ou seja, a gente pega todos os pargrafos,
no precisa ficar criando uma <div> para cada bloco.

Por exemplo, se eu for alterar o pargrafo, altero o de
todos.


P
g
i
n
a
7
3

Vamos criar tambm no #box_central_inf_esquerda span a,
aquele efeito, opacity:1; filter: alpha (opacity = 100).

Vamos copiar este estilo e colar abaixo.

Vamos mudar a opacity deste estilo para 0.5 e no alpha
para 60% e a gente vai modificar acrescentar depois do a o
hover.

Inclusive a gente pode tirar aqui, deixar s o opacity.

Criamos um efeito de alpha.

Vamos copiar todo contedo box esquerda.

Vamos colar para dentro do box_inf_meio, no lugar do
texto meio, porque vai ser a mesma formatao, s vou
mudar a informao, na verdade, aqui o box do
desenvolvimento de games.


P
g
i
n
a
7
4

A informao do nosso texto tambm muda.

A gente tem que criar um estilo #box_meio_interna, para
modificar o <h1> a gente vai ter que copiar este box
esquerda interna.

E vamos colar abaixo do #box_central_inf_direita e vamos
trocar de direita para meio.

Vamos voltar no nosso index e copiar est <div
id=box_central_inf_esquerda_interna>.

E colocar dentro do texto meio, s vamos trocar para meio
no lugar de esquerda, vamos fechar a nossa </div>.

Outra coisa que a gente vai fazer, este
#box_central_inf_esquerda_interna h1 que colocamos no
interna a gente vamos recortar Ctrl+X.

E vamos colar abaixo do #box_central_inf p.


P
g
i
n
a
7
5

Vamos padronizar, assim como a gente fez no pargrafo
vamos trocar o nome de #box_central_inf-esquerda_interna
h1 para #box_central_inf h1.

E ai ficou certo.

Outra coisa, este span, a gente pode globalizar tambm, ai
fica uma forma bem mais correta, vamos recortar Ctrl+X .

Vamos colar depois do #box-central_inf h1.

Vamos modificar o #box_central_inf_esquerda span a para
#box_central_inf span a.

E abaixo vamos trocar para #box_central_inf span a:hover,
pronto.

P
g
i
n
a
7
6

Vamos colocar o nosso estilo #box_central_inf_meio, como
position: relative.

Ento agora j est certo.

O que fizemos aqui afinal? Tnhamos uma <div pai>, a <div
pai> e dona de todo o bloco que pega de uma margem a
outra, eu estava fazendo a formatao individual, ou seja,
estava declarando o cabealho de nvel 1 que <h1> apenas
para a <div> do box esquerda que este aqui, o esquerda
interna.

S que isto estava causando um problema, na verdade, no
um problema, eu teria que fazer uma personalizao para
cada bloco, individual, ento a gente pode fazer o seguinte,
coloca um padro para todo <h1> que voc coloque dentro
do bloco pai, faz tambm uma padronizao por pargrafo,
faz uma padronizao para a imagem de um link tambm e
ai voc ganha uma otimizao no cdigo, fica menor o
cdigo.

A nica coisa que a gente fez individual foi a esquerda
interna e o meio interno, que a gente teve que colocar
padro individual para cada bloco, agora a gente vai ter
que trabalhar este bloco da direita.

Vamos acrescentar aqui na direita, vamos criar uma outra
<div id=box_central_inf_direita_interna>, e vamos fechar
a </div>.

Vamos colocar o nosso texto na esquerda, vamos no estilo,
abaixo do #box_central_inf_meio_interna, vamos digitar
#box_central_inf_direita_interna.


P
g
i
n
a
7
7

Este estilo do meio_interna vamos colocar prximo ao meio,
agora sim est organizado.

E na inf_direita_interna, a gente vai colocar a dimenso do
nosso texto, vamos dar um print screen novamente, e
vamos colar no Fireworks, para ver aqui a dimenso, temos
esta faixa para poder escrever, temos 200px de largura,
vamos colocar 172px de altura.

Vamos colocar o width:200px, vamos colocar uma cor:
background:Orange;.

Temos aqui o espao para adicionar o texto, observe o bloco
que a gente vai trabalhar.

Vamos afastar um pouco da esquerda, vamos digitar
margin:0 0 0 5px;.

Afastamos um pouco.

Vamos afastar do topo tambm, margin:10px 0 0 5px;.

P
g
i
n
a
7
8

Depois a gente mexer de novo, e eu vou colocar aqui
tambm o nosso ttulo com <h1>MERCADO!</H1>, que ele
que vai pegar a formatao padro aqui do <H1>.

Vamos colocar um texto acima do <h1> com pargrafo.

Vamos agora colocar um outro texto com pargrafos abaixo
do <h1>.

Vamos remover o laranja do fundo, mudou um pouco do
projeto inicial mas no tem problema.

Ento t ai o nosso bloco produzido, nosso bloco j est
feito.

A gente pode colocar um link aqui tambm, podemos
tambm colocar um outro boto no bloco da direita, mas ai
a gente vai ter que criar uma outra class, ou trabalhar o
span para colocar do lado esquerdo o Boto, se optar por
colocar s o link no texto clique aqui e saiba mais..., crie
um link com um texto e vamos deixar o link com o sinal #
para depois colocarmos o seu destino.

Mais se vamos colocar um Boto, vamos copiar a linha do
boto do meio no nosso projeto no Dreamweaver.

P
g
i
n
a
7
9

Vamos colar abaixo do nosso texto no box da direita.

Vamos agora na nossa folha de estilo no
#box_central_inf_direita, vamos colocar o position:relative.

Com isso os nossos Botes ficam alinhados na mesma
posio, vamos movimenta-los para a esquerda no modo
Design no nosso index.

Ento nosso bloco est quase da mesma forma que a gente
planejou.

A gente teve pequenas diferenas, se voc quiser pode
aumentar o tamanho destes dois boxs para voc poder
criar um espaamento igualitrio.

S que a inteno exatamente est, criar algo bem
moderno e que esteja bastante acessvel.
Modulo 3 - 31 - Ajustando borda e criando unio dos blocos
A gente est trabalhando desde o incio do projeto com o
Google Chorme, s que se voc abrir o Internet Explorer,
vocs vo ver que a imagem que contm o nossos links
esto com uma borda azul que comum, isto comum
quando a gente trabalha com evento de link com uma
imagem, para resolver isto muito simples, na folha de
estilo do projeto a gente vai colocar acima do box_pai,
vamos colocar um img, e colocar um border 0, vamos
salvar.

Ento agora est tudo funcionando sem bordas.

Vamos fazer o seguinte, a gente est vendo que aqui no
canto inferior, a gente tem este dois blocos que est mais
espaado do que este da direita, ento vamos criar um
artificio aqui que possa maquiar um pouco este espao que
fica morto aqui.


P
g
i
n
a
8
0

Vamos fazer uma alterao no nosso box da esquerda no
nosso estilo #box_central_inf_esquerda_interna, vamos
mudar a direo do texto e da imagem, para podermos
colocar um crculo de unio entre eles.
vamos trocar o nosso Float de Right para Left.

Vamos dar um print nesta tela que se abre no navegado,
cria um novo documento no Fireworks com as mesmas
medidas.

Vamos criar um Doughnut.

Vamos mudar para um crculo furado, vamos posicionar
entre os box.

Vamos criar um retngulo.

Selecione os dois com a tecla Shift, vamos no menu
Modify>>Combine Paths>>Punch.

Criamos esta semi argola, metade de uma argola.

Vamos fazer o seguinte, vamos utilizar um estilo de cor
vermelha.

Ficou do jeito que ns queramos.


P
g
i
n
a
8
1

Vamos clicar na combinao de teclas Ctrl +, para dar um
ZOOM.

Vamos criar um retngulo linear na horizontal.

Vamos tirar a borda.

Vamos colocar lado esquerdo branco, direito branco, e no
meio um cinza mais escuro #555555.

A altura vou colocar 1px e a gente cria este efeito aqui.

Inclusive podemos colocar uma cinza mais suave #BBBBBB,
mas vamos manter a cor mais escura para ficar como se
estivesse entrando dentro dos blocos.

Vamos fazer a mesma coisa, Ctrl+C, Ctrl+V, e trazer para o
outro lado.

Vamos centralizar este dois aqui, temos este efeito aqui.

A gente pode remover isto tudo e deixar apenas as formas
que criamos.

Vamos agrupar, clicando Ctrl+G.

No menu Modify>>Canvas>>Trim Canvas.

Vamos agora tirar o fundo.

V agora no Menu file>>imagem Preview...

P
g
i
n
a
8
2

Vamos escolher a extenso PNG 32 e ns vamos salvar com
o nome union.

Temos aqui o bloco geral por baixo destes 3 blocos.

Vamos pegar aqui, que exatamente o box_central_inf.

Vamos procurar aqui o nosso estilo vamos clicar no Ctrl+F
para abrir o Find and Replace.

Vamos colocar este box central inf como position relative.

E aqui no cdigo dentro do index, ns vamos colocar depois
da <div> do box_central_inf, esta imagem que criamos,
colocando o cdigo <img src=imagens/union.png/> vamos
salvar.

Ela vai aparecer num lugar que no tem nada a ver.

Vamos criar uma class, img_float.

Vamos digitar ela dentro da imagem, <img
class=img_float src=imagens/union.png /> vamos
Salvar Ctrl+S no index e na nossa folha de estilo.

Vamos colocar um left:0, um top:0 e z-index 999.

P
g
i
n
a
8
3

Com isso a nossa imagem vem a frente de todos os blocos
que a gente est trabalhando com camadas.

Vamos mudar o left, para 267px.

Vamos ver como ficou.

Vamos trabalhar o top colocando 10px.

Criamos um efeito no bloco como se ele estivesse
interligado ao outro, e ai vocs podem ver como ter ideia
como trabalhar com z-index quanto tambm o position e
aqui a gente cria um certo efeito que quebra o espao que
estava aqui um pouco vazio.

Modulo 3 - 32 - Finalizando ajustes do bloco inferior central
Ns criamos algumas globalizao de estilo, por exemplo o
pargrafo no box_central_inf, o cabealho nvel 1 no box
central_inf, o span no bloco central inf.

Criamos tambm duas internas individuas, uma para o
esquerdo, e uma para o meio interno tambm, ento ficou
aqui, box_central_inf_meio_interna, e
box_central_if_esquerda interna.

Esses so exatamente os que tem o ttulo, o pargrafo e o
boto.


P
g
i
n
a
8
4

Podemos tambm globalizar esta caixa por exemplo,
recortar #box_central_inf_meio_interna.

Vamos colar depois do #box_central_inf.

Vamos trocar para #box_central_inf_interna e salvar.

Vamos tirar tambm o #box_centrar_inf_esquerda_interna.

Vamos tirar tambm o #box_inf_meio_interna.

Vamos atualizar e veremos que vamos ter problemas com o
posicionamento de todos os elementos.

Vamos fao uma modificao no #box_central_inf_interna,
que agora o padro, um s, pelo menos para os dois
blocos, da esquerda e do meio.


P
g
i
n
a
8
5

Ento a gente volta no index, na <div> que contm o
#box_central_inf_esquerda_interna.

Vamos alterar para box sem a #, box_central_inf_interna.

E tambm abaixo no box_central_inf_meio_interna, para
box_central_inf_interna.

E agora volta tudo ao normal, alinhado corretamente.

S vamos ter que fazer uma alterao no nosso box da
esquerda pois o cones dos programas de web esto abaixo
do texto, vamos no Fireworks e vamos posiciona-los a
esquerda agora.

Vamos atualizar e salvar.

O outro problema tambm, que no Navegador Google
Chorme, o efeito do play t funcionando, s que se eu
acessar o internet explorer voc tem o funcionamento nos
botes, nos cones e nos slide s que no play ele no
funciona.

A gente pode resolver isto, e muito simples tambm, vamos
tirar est class=play que a gente criou aqui das imagens
que so aquelas 3 imagens, vamos salvar.

O Chorme vai dar o problema e o internet explorer tambm
vai dar o mesmo problema.

S que no internet explorer vai funcionar.

Ento como a gente resolve agora, vamos no estilo,
procurar o play, vamos deletar esta class.

P
g
i
n
a
8
6

Vamos acrescentar aqui no #box_sup_centrar_bg_dois span
a.

exatamente o que a gente tem aqui, box_sup_central_bd
dois.

S que est imagens esto em span, que o evento do link.
Ento no #box_sup_central_bg_dois span a, a gente vai
adicionar position, absolute,

Vamos atualizar.

Problema resolvido no Navegador Chorme e no internet
Explorer, inclusive o alpha funcionando.
Modulo 3 - 33 - Criando bloco inferior
Para desenvolver o bloco que antecede o rodap, e muito
mais simples, pois ele contm s 2 blocos, contem texto e no
caso aqui dos cursos, contm uma imagem.

No index no Projeto do Dreamweaver, vamos descer, e ns
vamos adicionar o bloco maior antes do fechamento do box
pai. Vamos abrir uma <div> com a id bloco_inferior. Temos
acima o bloco central inferior, e agora o box central inferior,
abaixo.

Dentro do box inferior, vamos colocar um texto,
INFERIOR.

P
g
i
n
a
8
7

Vamos copiar o id.

Vamos colar antes do rodap no nosso estilo e formata-lo,
vamos colocar #box_inferior, colocar uma altura, algo
entorno de 175px de acordo com o tamanho do nosso
projeto no Firewoks, background, colocar um Orange.

Vamos salvar o nosso estilo e o index e abrir o nosso
projeto, j temos aqui no nosso bloco, que o bloco interior.

Vamos criar as <div> internas, Vamos criar o
box_inferior_esquerda.

Vamos copiar, e o renomear para box_inferior_direita, e
abaixo colocar direita.

Vamos criar tambm na folha de estilo, abaixo de
#box_inferior o #box_inferior_esquerda e fazer algumas
personalizaes destas <div> vamos colocar um float:left,
height:175px de altura, e vamos colocar um background e
escolher uma cor no nosso exemplo vou colocar a cor
purple.

Vamos copiar e colar, e vamos abaixo e modificar,
colocando direita, a cor green.

Agora vamos ter que pegar neste caso aqui, a dimenso que
usada neste caso esquerdo.


P
g
i
n
a
8
8

Vamos dar um print no projeto aberto no navegador, vai no
menu File>>New no Firewoks e no documento que abre
vamos colar nosso print.

Vamos ciar um box entre o box muiltimedia, para vermos as
medidas temos no width 670px.

Ento vamos colocar no bloco esquerdo com 670px.

E no bloco direito, vamos clicar em Ctrl+F, para abrir a caixa
Find and Replace para procurar o bloco do facebook.

A gente tem 321px de Width, ento vamos colocar na
direita, 322px.

Vamos salvar e atualizar.

Temos agora o bloco da esquerda e o bloco da direita,
vamos flutuar tambm o da direita, com right.

E o nosso box da direita, flutua para a direita.

Agora a gente vai fazer a formatao igual ao projeto.
Vamos colocar no nosso index um <h1>, dentro do
box_inferior_esquerda.
Este <h1> a gente vai colocar o texto: A melhor estrutura, o
melhor ensino!.

P
g
i
n
a
8
9

Agora vamos colocar um pargrafo, vamos colocar o texto
que est abaixo do Ttulo.

Vamos atualizar.

Vamos fazer o mesmo processo para o lado esquerdo,
vamos colocar o <h1>, para o nosso ttulo.

Vamos no nosso projeto no Fireworks e vamos copiar a
nossa imagem e colar em um novo documento.

V em File>>New e vamos colar.

Vamos salvar como um gif v em File>>imagem preview.

Vamos salvar com o nome na pasta imagens, Falsh_logo.

E vamos colocar esta imagem, no seu devido lugar crie uma
<img src=imagens/flash_logo.gif /> e adicione a imagem e
vamos salvar.

Obviamente no ficou muito legal.

Vamos efetuar agora a formatao, tanto o pargrafo
quanto o <h1>, podemos fazer no bloco principal que foi o
bloco que ns criamos, que o box inferior, j que vai ter a
mesma padronizao, adiciona o <h1> desta forma no
nosso estilo.

P
g
i
n
a
9
0

Vamos cocar agora um estilo de fonte, Font-family: georgia,
Times New Roman, Times, serif; abaixo colocamos o font-
size: 30px, vamos ainda colocar uma cor, color: #999999; e
um font-style: itlico.

Salva e vamos ver se ficou bom.

Vamos fazer tambm a formatao do pargrafo, vamos
copiar o estilo <h1> e trocar para um p, vamos trocar o font-
size:11px e tirar o font-family e o font-style.

Vamos tirar o background: purple, do
#box_inferior_esquerda.

E tambm vamos tirar o Orange, do #box_inferior.

No #box_inferior, podemos colocar um margin: com 15px
no topo e a gente afasta um pouco, ok.

Vamos fazer aqui o seguinte, l em cima, perto do estilo do
body vamos colocar um h1, com margin de 4px de distncia
em baixo, ento a gente cria um espao padro, ento fica
tudo num padro.

Toda a formatao de nvel h1 no seu documento, como eu
declarei apenas o h1, e mais nenhuma div, ou seja, o h1 est

P
g
i
n
a
9
1

livre, como a gente fez na estilo da imagem, que est
abaixo, a gente criou uma formatao global para todos os
projetos, desde que voc no faa nenhuma formatao
para outros ttulos de algum cabealho de nvel 1 em algum
outro bloco.

Vamos no cliente tambm, vamos tirar o background:
green, ok.

Aqui no estilo #box_inferior_direita, a gente pode fazer o
seguinte, vamos colocar o position relativo isto para o box
da direita.

Vamos acrescentar o pargrafo somente para a esquerda
com esta formatao.

Porque neste caso a gente pode criar uma formatao
diferente para a direita, ento a gente no pode englobar
uma formatao para o bloco, que o bloco inferior, ento
a gente vai ter que fazer um formatao individual. Ento a
gente vai pegar criar o #box_inferior_direita p.

Vamos colocar um width, vamos colocar mais ou menos,
300px, e um float: right ok.


P
g
i
n
a
9
2

Colocamos o pargrafo aqui na direita.

E agora vamos criar um estilo para imagem, Na verdade
isto uma das possibilidades de voc poder trabalhar este
alinhamento, ento est aqui, o alinhamento foi feito.

Vamos criar ainda, uma borda, border:1px solid com a cor
#CCCCCC e a gente j cria a borda na imagem.

Vamos pegar aqui a mesma formatao de cor e tamanho
do pargrafo, que o mesmo formatao aqui da esquerda.

Vamos atualizar, t ai.

Podemos ainda diminuir um pouco este box aqui, PARA no
ficar muito colado, ento a gente pega aqui na esquerda,
vamos colocar 665px e fica um pouco mais afastado.

O projeto fica exatamente com a gente planejou, algumas
modificaes em relao ao tamanho de fonte, aumentar
um pouco aqui, e ok. E ai a gente j tem o nosso bloco
inferior do jeito que a gente planejou.

Modulo 3 34 Criando Rodap
Ns vamos agora criar um rodap no do nosso projeto, mas
antes de fazer isto, ns vamos remover aquelas coisa de
background que utilizamos. Ento aqui no arquivo estilo, a
gente vai dar uma conferida, antes a gente vai escolher
uma cor para o background, a gente pode pegar uma cor,
um cinza bem interessante, no precisa ser um cinza escuro.
Pegar esta cor aqui #EEEEEE; e a gente vai colocar aqui no
background do body no lugar do Orange.

Vamos clicar em Ctrl+S, e atualizar, e ai voc j pode
observa que a gente tem aqui a modificao do
background.

E agora sim a gente est ai com nosso background, outra
coisa no nosso body, eu vou trabalhar aqui com paggind
top, vamos colocar 8px no topo, afastando o nosso
contedo no topo do nosso site tambm.

P
g
i
n
a
9
3

Agora eu vou pegar aqui a imagem no projeto do Fireworks.

O mesmo processo, Canvas, Canvas size, 1px.

E a gente vai salvar como png 24, com o nome de bg body.

E aqui no nosso documento, depois daquela cor que a gente
colocou no background, a gente vai colocar como
url(../imagens/bg-body.png) repeat-x top.

Vamos clicar Ctrl+S, e ai a gente atualizar e ai cria um cinza
mais escuro aqui em cima, e neste caso, como a gente
pegou aqui, a gente colocou esta cor final desta imagem
como cor de fundo. Ento quanto termina esta imagem
quando a gente colocou o repeat-x, ele s repete no final.
Termina a imagem, ele comea a cor no fundo.

Para poder fazer o rodap, tambm muito simples, no
projeto do Fireworks a gente DUAS PARTES, a gente tem o
efeito aqui, que o efeito do endereo que a gente vai criar,
temos aqui tambm um degrade aqui em cima, ento a
gente vai ter que trabalhar o degrade no fundo deste bloco
principal.

Vamos trabalhar aqui no Slices, vou pegar este primeiro
bloco aqui, vou colocar este nome como bg_box_pai, que
vai ser o background do box pai.

Com o boto direito, export select slide.

E ai a gente j tem aqui images only, export slicer,
bg_box_pai.

P
g
i
n
a
9
4

Podemos colocar no box pai, este background, colocar
url(../imagens/bg_box_pai.png) repeat-x bottom.

Vamos atualizar, e a gente pode reparar que ele cria aqui
um Degrade.

Agora pegar a outra parte que nos cabe, ok, exatamente a
parte a gente vai colocar dentro do rodap da rea do
menu, abrir aqui e tambm aqui no endereo, e a parte aqui
do endereo e tranquila, pegar tambm aqui no slices, criar,
ver se est tudo certo, colocar tambm 1px.

Vamos salvar como bg_rodap_barra.

E ai dentro do nosso documento, no rodap, a gente vai
fazer o seguinte, a gente vai colocar um <address>.

E vamos copiar o contedo da barra.

Vamos colar no rodap dentro de address, vamos dar um
Ctrl+S, e criamos um CopyRight.

Agora gente pode trabalhar o rodap, e trabalhar o
<address> dentro do rodap, vamos pegar aqui no estilo,
criar o rodap, que j e o que a gente tem, que foi criado no
incio do curso e pegar criar o #rodape address.

Vamos colocar o background,
url(../imagens/bg_rodape_barra.png)repeat x top.

Vamos atualizar, e ai a gente cria um background.


P
g
i
n
a
9
5

S que como no colocamos um tamanho, o tamanho que
temos no bg_rodape_barra de 45.

Vamos atualizar, e agora sim a gente criou o efeito.

S que a gente vai trabalhar na personificao do nosso
contedo, vamos colocar a cor #999999, font-size 12px font-
weight:bold, font-style:normal, e ai fica do jeito que a gente
precisa.

Vamos afastar ele um pouco do topo, ento eu vou colocar
aqui um padding top 8px, ento eu vou tirar 15 aqui da
altura, colocar 30px, ok.

Vamos centralizar com o text-align: center e ficou
centralizado e assim que tem que ser.

Agora aqui no rodap, ns vamos aumentar o tamanho, a
gente vai colocar aqui 150px e a gente aumenta o tamanho
dele, neste caso vamos colocar um branco, para criar aquele
efeito.

Neste caso, voltando aqui, a cor que colocou fica at melhor
este cinza com o rodap, aqui TAMBM, A gente pode
colocar um border bottom, com 1px solido.

Podemos colocar a cor na imagem, colocar aqui #CCCCCC,
em hexadecimal o cinza.

Vamos colocar o cinza do jeito que estava, acho que fica
bem melhor.

P
g
i
n
a
9
6

Agora vamos criar o menu, <ul>, e a gente vai colocar o
contedo que a gente tem no menu principal.

Agora vamos colocar o contedo do menu que a gente tem
aqui.

Vamos copiar os textos e colar abaixo do <li>.

Vamos agora criar os link comeando pelo Home e
finalizando com o contato.

Vamos fazer agora a formatao dentro da <div> rodap
trabalhando ai com a lista, #rodape ul.

Abaixo vamos colocar #rodape ul li.

Vamos colocar agora dentro de #rodape ul li display: inline,
margin, colocar aqui na direita, colocar 0 na esquerda, na
direita colocar 15px, vamos colocar um font-size com 12px
tamanho da fonte.

Vamos copiar aqui o #rodape ul li, e vamos colar abaixo
para criar o efeito do link, vamos acrescentar o #rodape ul li
a.

Vamos colocar o text-decoration: none e a cor padro
vamos colocar #FFF.


P
g
i
n
a
9
7

Vamos criar agora o sublinhado vamos copiar o #rodape ul
li a e colar abaixo, acrescente depois do a o #rodape ul li
a:hover.

Vamos colocar um text-decoration: underline.

Agora sim, quando passar a seta do mouse o sublinhado
aparece.

Vamos voltar no #rodape ul e colocar, margin 0; padding
tambm vamos colocar 0, abaixo vamos colocar um
float:left.

S que o seguinte, ele est pegando aqui toda a barra do
nosso projeto que ele expande, ento a gente tem que
colocar a mesma largura do box pai que ele tem 1000px,
vamos colocar no #rodape ul o width, 1000px.

Neste caso, ele no vai funcionar por causa do float, vamos
tirar o float, vamos colocar um margin:0 auto, para o menu
centraliza, com o estilo text-align:left, ele vai colocar o
contedo todo na esquerda.

Esta da exatamente da forma que a gente planejou, se voc
quiser no seu projeto, a gente pode at usar este espao na
esquerda para colocar alguma coisa, colocar algum cone,
muita gente usa a redes sociais aqui em baixo, mas o nosso
projeto a gente deu destaque na rede social em cima.

Ento a gente tem o rodap bem semelhante ao nosso
projeto principal, a gente fez umas pequenas modificaes,
visando a melhoria do nosso projeto, e o rodap funcional.

Vamos voltar no box pai, ele esta com 1200 de height,
vamos tira-lo.

Agora sim ele est no tamanho e ai ele fica com um espao
aqui em baixo porque exatamente ele pega o tamanho do
bloco que a gente determinou, e a gente pode deixar este
bloco assim para no ficar muito colado no rodap.

P
g
i
n
a
9
8

Agora a gente vai ver aqui as cores de fundo que a gente
trabalhou aqui, tudo que tiver background, Orange,
background purple, a gente vai remover, porque foram
cores que a gente utilizou, para ter a noo com relao aos
nossos projetos, os nossos blocos e tudo mais, ento no
esquea de dar conferida no projeto para remov-las.
muito importante que voc tenha ateno a isto.
Esta ai o nosso projeto, a nossa Home finalizada, alguns
ajustes no projeto final, mas funcional do jeito que tem que
ser.

Apostidream PDF

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Apostidream PDF

Hochgeladen von

Copyright:

Verfügbare Formate

SISTEMA DE ENSINO MICROMAX 2013-todososdireitosreservados.

SISTEMA DE ENSINO MICROMAX 2013-todososdireitosreservados.

SISTEMA DE ENSINO MICROMAX 2013-todososdireitosreservados.

SISTEMA DE ENSINO MICROMAX 2013-todososdireitosreservados.

SISTEMA DE ENSINO MICROMAX 2013-todososdireitosreservados.

SISTEMA DE ENSINO MICROMAX 2013-todososdireitosreservados.

SISTEMA DE ENSINO MICROMAX 2013-todososdireitosreservados.

SISTEMA DE ENSINO MICROMAX 2013-todososdireitosreservados.

SISTEMA DE ENSINO MICROMAX 2013-todososdireitosreservados.

SISTEMA DE ENSINO MICROMAX 2013-todososdireitosreservados.

SISTEMA DE ENSINO MICROMAX 2013-todososdireitosreservados.

SISTEMA DE ENSINO MICROMAX 2013-todososdireitosreservados.

SISTEMA DE ENSINO MICROMAX 2013-todososdireitosreservados.

SISTEMA DE ENSINO MICROMAX 2013-todososdireitosreservados.

SISTEMA DE ENSINO MICROMAX 2013-todososdireitosreservados.

SISTEMA DE ENSINO MICROMAX 2013-todososdireitosreservados.

SISTEMA DE ENSINO MICROMAX 2013-todososdireitosreservados.

SISTEMA DE ENSINO MICROMAX 2013-todososdireitosreservados.

SISTEMA DE ENSINO MICROMAX 2013-todososdireitosreservados.

SISTEMA DE ENSINO MICROMAX 2013-todososdireitosreservados.

SISTEMA DE ENSINO MICROMAX 2013-todososdireitosreservados.

SISTEMA DE ENSINO MICROMAX 2013-todososdireitosreservados.

SISTEMA DE ENSINO MICROMAX 2013-todososdireitosreservados.

SISTEMA DE ENSINO MICROMAX 2013-todososdireitosreservados.

SISTEMA DE ENSINO MICROMAX 2013-todososdireitosreservados.

SISTEMA DE ENSINO MICROMAX 2013-todososdireitosreservados.

SISTEMA DE ENSINO MICROMAX 2013-todososdireitosreservados.

SISTEMA DE ENSINO MICROMAX 2013-todososdireitosreservados.

SISTEMA DE ENSINO MICROMAX 2013-todososdireitosreservados.

SISTEMA DE ENSINO MICROMAX 2013-todososdireitosreservados.

SISTEMA DE ENSINO MICROMAX 2013-todososdireitosreservados.

SISTEMA DE ENSINO MICROMAX 2013-todososdireitosreservados.

SISTEMA DE ENSINO MICROMAX 2013-todososdireitosreservados.

SISTEMA DE ENSINO MICROMAX 2013-todososdireitosreservados.

SISTEMA DE ENSINO MICROMAX 2013-todososdireitosreservados.

SISTEMA DE ENSINO MICROMAX 2013-todososdireitosreservados.

SISTEMA DE ENSINO MICROMAX 2013-todososdireitosreservados.

SISTEMA DE ENSINO MICROMAX 2013-todososdireitosreservados.

SISTEMA DE ENSINO MICROMAX 2013-todososdireitosreservados.

SISTEMA DE ENSINO MICROMAX 2013-todososdireitosreservados.

SISTEMA DE ENSINO MICROMAX 2013-todososdireitosreservados.

SISTEMA DE ENSINO MICROMAX 2013-todososdireitosreservados.

SISTEMA DE ENSINO MICROMAX 2013-todososdireitosreservados.

SISTEMA DE ENSINO MICROMAX 2013-todososdireitosreservados.

SISTEMA DE ENSINO MICROMAX 2013-todososdireitosreservados.

SISTEMA DE ENSINO MICROMAX 2013-todososdireitosreservados.

SISTEMA DE ENSINO MICROMAX 2013-todososdireitosreservados.

SISTEMA DE ENSINO MICROMAX 2013-todososdireitosreservados.

SISTEMA DE ENSINO MICROMAX 2013-todososdireitosreservados.

SISTEMA DE ENSINO MICROMAX 2013-todososdireitosreservados.

SISTEMA DE ENSINO MICROMAX 2013-todososdireitosreservados.

SISTEMA DE ENSINO MICROMAX 2013-todososdireitosreservados.

SISTEMA DE ENSINO MICROMAX 2013-todososdireitosreservados.

SISTEMA DE ENSINO MICROMAX 2013-todososdireitosreservados.

SISTEMA DE ENSINO MICROMAX 2013-todososdireitosreservados.

SISTEMA DE ENSINO MICROMAX 2013-todososdireitosreservados.

SISTEMA DE ENSINO MICROMAX 2013-todososdireitosreservados.

SISTEMA DE ENSINO MICROMAX 2013-todososdireitosreservados.

SISTEMA DE ENSINO MICROMAX 2013-todososdireitosreservados.

SISTEMA DE ENSINO MICROMAX 2013-todososdireitosreservados.

SISTEMA DE ENSINO MICROMAX 2013-todososdireitosreservados.

SISTEMA DE ENSINO MICROMAX 2013-todososdireitosreservados.

SISTEMA DE ENSINO MICROMAX 2013-todososdireitosreservados.