Curso de PSD para

html & CSS

Aula 01
HTML 1 ao 4.01

Queridos alunos, vamos comear nossa saga pelo HTML. Esta aula composta de uma
vdeo-aula, onde explico um pouco da histria do HTML at chegar ao HTML 4.01 e
seus detalhes. Para muitos alunos esta aula servir como uma pequena reviso, j para
outros espero esclarecer muitas dvidas.

Aps o vdeo, voc encontrar um texto complementar que auxiliar voc a fixar o que
foi apresentado em nossa vdeo-aula.

Disponibilizei tambm a primeira parte de nossa apostila de exerccios, no formato PDF

que se encontra no final desta pgina. As respostas dos exerccios sero revelados na
prxima aula.

Quirks Mode: quando o navegador no sabe que

HTML esse

Voc gostaria de ser um navegador? Eu

gostaria. Se fosse para ser um Amyr Klink ou
um Jaques Costeau, viajando para lugares
paradisacos desse planeta, sem dvida seria
um navegador muito feliz. Agora, navegador
de internet, nem pensar! Coitado dos
navegadores. Firefox, Internet Explorer,
Safari e Opera que o digam. No fcil ter
que interpretar tantos cdigos fora do padro.

Hoje temos muitas pginas utilizando

diversas verses de HTML misturando-se o
antigo com o novo. Sem falar nos erros de
marcao. Mesmo assim, o trabalho de todo
navegador exibir a pgina, sempre da
melhor forma.

Na poca da guerra entre Netscape e Internet

Explorer, no final do sculo passado, cada empresa tratou de inventar o seu tipo de
cdigo html. Resultado: lixo. E esse lixo vem sendo utilizado at hoje, mesmo com o
advento do W3C e a padronizao do HTML.

Muitos ficam com raiva dos coitados dos navegadores que tentam exibir essa lixarada
da melhor forma mas muitas vezes no conseguem exibir do mesmo jeito que o outro
navegador amigo. O correto mesmo ns, webdesigners e programadores, deixarmos de
utilizar uma srie de cdigos ultrapassados.

J que muitos no seguem um padro de programao html, os navegadores precisam

ter dois conjuntos de regras para exibir pginas HTML. Quando o navegador apela para
as regras antigas, ativado um processo chamado Quirks Mode.

Porm, quando no indicado a verso HTML utilizada, o navegador interpreta que

aquela pgina pode conter vrias verses de HTML e por isso entra no modo Quirks,
fazendo com que certos elementos no sejam interpretados de acordo com os padres
mas de acordo com o conjunto de regras do prprio navegador.

Resultado: sua pgina fica uma caca e ento a culpa recai sobre o coitado do navegador.

Por isso no se esquea: diga ao navegador a verso de HTML que voc est utilizando.
Assista mais sobre isso na nossa vdeo-aula.

Sem Frescura

1. Afinal, que porcaria essa

que voc chama de padro?

Calma, calma, no priemos

cnico. "Padro" ou "HTML
Padro" o HTML que segue a
risca o padro de programao
estabelecido pelo W3C .
Resumindo, alguns caras se
reuniram e comearam a
estabelecer regras para o html.
Quando burladas, a
programao HTML deixa de
seguir o padro. Hoje o padro
estabelecido por essa rapaziada
que formam o que chamamos
de W3C, o HTML 4.01. No
prprio site do W3C voc pode encontrar todas essas regras.

2. Ah, mas eu fao o HTML no Dreamweaver, fica cheio de lixo mesmo, mas e da,
aparece legal no Internet Explorer, porqu eu tenho que me importar com isso?
, se voc gosta de adrenalina, aventura e adora fortes emoes, ento nem ligue para o
padro. Quando voc resolver visualizar sua pgina num celular, na TV ou em algum
Mac da vida, seu corao bater forte. Sem falar no cliente, que voc chamar de chato
pois ele usa o Firefox.

Agora, se voc quiser fazer pginas consistentes. bem visualizadas em qualquer

plataforma ou navegador, siga o padro estabelecido pelo W3C. No tem por onde
escapar, isso j algo estabelecido e que no tem volta.

3. E como vou saber que estou criando minhas pginas utilizando o padro?

Utilizando o Validador do W3C . Veja mais em nossa vdeo-aula.

4. Quer dizer que HTML 4.01 e padro a mesma coisa?

Bem, quando dizemos "html padro" a ltima verso aprovada. Como a ltima verso
a 4.01, logo ela a padro. Mas existem outros padres que falaremos nas prximas
aulas.

5. Quando ser lanado o HTML 5?

Talvez, nunca. Pois no se escreve mais pginas HTML como se escrevia antigamente.
Hoje o novo padro utilizado para se fazer pginas o XHTML que veremos na
prxima aula.

6. U, ento porqu estamos vendo HTML 4.01?

Porqu necessrio entendermos primeiro o HTML 4.01 para chegarmos ao XHTML.

Sem entender o HTML 4.01 e seus padres, voc no ir compreender bem o XHTML.

7. Vem c, se eu bancar o engraadinho e dizer ao navegador que a pgina

HTML 4.01 mas ao programar, no seguir o padro?

No primeiro erro o navegador descobre e entra no mtodo Quirks mode. E o resultado

disso um navegador interpretando de uma maneira e o outro de outra maneira, ou seja,
sua pgina ficar de um jeito em um e de outro jeito em outro navegador.
Dever de casa
Aqui est nosso primeiro dever de casa. A idia em cada aula termos um novo PDF
contendo os exerccios da aula correspondente. Se voc desejar, poder imprimir e
guardar. Os exerccios so compostos de perguntas, joguinhos e outras tarefas de
fixao. As respostas s sero reveladas na prxima aula.

Divirta-se-> Exerccios da Aula 01

XHTML aula 2

Na aula de hoje iremos conhecer o XHTML ( Extensible Hypertext Markup Language ),

a nova gerao do HTML, uma verso mais enxuta, com mais recursos e mais
compatibilidade com inmeros dispositivos.

Na nossa vdeo-aula, irei mostrar a transformao de um HTML em XHTML validado

pelo W3C. Depois disso s iremos trabalhar com XHTML e CSS ( que iremos conhecer
na prxima aula ).

Sem Frescura

1. V o vdeo e no entendi direito o que esse atributo xmlns. D pra me explicar

direito que troo esse?

Bem, esse assunto um pouco confuso mesmo, mas vamos l. Com o XML voc pode
criar qualquer linguagem. Por exemplo:

<table>

Lendo a tag acima, voc logo pensou que se refere a um HTML, correto? Mas e se isso
fosse uma tag ligado a um XML sobre o assunto mveis? Como que o navegador
saberia que isso se trata de um XML e no de uma tag HTML?

Por isso necessrio indicar para o navegador que tipo de XML voc ir utilizar. Se
voc acessar atravs do navegador o identificador que utilizamos no XHTML
( http://www.w3.org/1999/xhtml/ ) voc ir perceber que nesse endereo se encontra
todas as referncias sobre o XHTML.

2. Sim, mas isso uma URL, no um identificador. Quando voc diz

identificador, me vem a cabea um rtulo, um nome comum de identificao.
, nem tudo nessa vida igual ao que parece, no mesmo? Por exemplo, se voc pegar
um convite de casamento e ler "Traje: Passeio Completo" voc pensa no qu? Voc
passeando, com seu cachorro, de bermudo, camiseta e uma chinela havaiana no p? ,
olhando apenas o nome jamais pensaramos em algum de terno e gravata. E o traje
esporte ento? Nunca vi ningum jogando bola de camisa de boto e cala de brim.

Portanto o item identificador (xmlns) na realidade uma URL que informar todos os
dados referentes aquela linguagem XML.

3. Porqu, mesmo sendo um XHTML, a pgina comea com um <html> ?

Porqu se comeasse com um <xhtml>, todos aqueles navegadores antigos, do Netscape

ao Internet Explorer 5, no entenderiam o que aquilo. O XHTML tem que ser
compatvel com todos os navegadores antigos, por isso no se alterou esse elemento
raiz.

Dever de casa
Aqui est nosso segundo dever de casa com as respostas dos exerccios da primeira
aula.

Divirta-se-> Exerccios da Aula 02

At a prxima!
 Aula 03 Conhecendo
o Css
Conhecendo o CSS

Chegou a hora da diverso. Finalmente chegamos no to aclamado CSS, o responsvel

pelas cores, formas e visual de um site. CSS significa Cascading Style Sheet,
significando em Portugus Folha de Estilo em Cascata. Podemos defin-lo como um
mecanismo simples para adicionar estilos (p.ex., fontes, cores, espaamentos) aos
documentos Web.

Na nossa vdeo-aula de hoje iremos comear a entender o que o CSS e o que ele faz.
Ento vamos logo ao que interessa. Senta que l vem a histria!

Sem Frescura

1. Vem c, Bruno, e se eu quiser fazer dois pargrafos mas cada uma com fontes
diferentes? Como que faz se s tem um <p>???

possvel sim e irei mostrar para vocs como que isso acontece. Vocs vero que
podemos definir que todo pargrafo, por exemplo, dentro de uma determinada camada
div ir se comportar de uma forma diferente dos demais <p>. Nas prximas aulas
iremos ver isso.

2. Afinal, tem uma lista de propriedades que eu posso usar num elemento? Tenho
que decorar todos?

No se preocupe em decorar nada. Com o tempo voc acaba decorando por tanto, se
voc no masoquista, ento o ideal que voc adquira um livro de CSS ou ento na
internet mesmo encontramos boas referncias. Aqui est uma delas:
http://www.abpsoft.com/criacaoweb/cssguiaref.html
3. Porqu eu no fao essa parada toda dentro do XHTML logo, porqu tenho que
separar?

Ao utilizar o CSS separado do XHTMl, isso ir facilitar muito la na frente. Bastar

modificar o CSS para mudar o visual de todo o site. Alis, na prxima aula iremos
colocar todo nosso CSS em um arquivo separado, aguarde e confie. ;)

Veja tambm:
Elementos HTML: todos os elementos HTML que voc poder alterar utilizando como
um seletor CSS

Tabela de Cores CSS: veja 504 cores com seus cdigos hexadecimais e seus nomes
oficiais que podem ser utilizados no seu CSS

Caracteres Especiais: veja todas as entidades dos caracteres especiais para voc
utilizar em seu XHTM

Dever de casa
Aqui est nosso terceiro dever de casa com as respostas dos exerccios da segunda aula.

Divirta-se-> Exerccios da Aula 03

ATENO: fiz uma pequena modificao no exerccio da aula 02. Faltou a imagem do
Astrogildo no html. Aproveite e pegue a atualizao clicando aqui.

At a prxima!
 Aula 04
Conhecendo o CSS - Parte II

Dando continuidade ao assunto CSS, iremos ver na aula de hoje a importncia de

separar o CSS do XHTML e como coloc-lo em um arquivo externo.Vamos logo ao que
interessa. Senta que l vem a histria!

No se esquea!
O contedo presente nas CSS se chamam regras.
Cada regrinha ir fornecer um estilo para o elemento XHTML
especificado.

A regra composta de um ou mais seletores acompanhados de

propriedades e seus valores.

O seletor ir apontar em qual elemento a regra ser aplicada.

No se esquea que no final do valor de cada propriedade deve ser

terminado com um ponto-e-vrgula.

As propriedades e valores de uma regra sempre devero vir entre

chaves { }.

Para selecionar um elemento XHTML basta coloc-lo como seletor no

CSS, sem os sinais de < e >.

Voc pode selecionar mltiplos elementos XHTML em seu CSS,

colocando como seletores e separando com vrgulas.

Para incluir uma folha de estilo ( CSS ) dentro de uma pgina, basta
adicionar a tag <style>.

Para sites maiores, com muitas pginas, recomenda-se utilizar uma

folha de estilos dentro de um arquivo externo (.css).

Para vincular o arquivo externo CSS sua pgina, basta utilizar o

elemento <link>.

Fique atento a herana. Se algum estilo for adicionado ao elemento

<body>, todos os elementos contidos em <body> herdaro a mesma
propriedade.

Caso no deseje que algum elemento no se comporte da maneira

definida em <body> basta criar uma regra especfica, utilizando o
elemento como seletor no seu CSS.

Para adicionar classes para diferenciar elementos semelhantes.

 No CSS, utilize ".nomedaclasse" para definir a regra como uma
classe.

No XHTML, utilize no elemento escolhido a tag

"class=nomedaclasse", sem utilizar ponto antes do nome da classe.

Dever de casa
Aqui est nosso dever de casa contendo tambm as respostas dos exerccios da ltima
aula.

Divirta-se-> Exerccios da Aula 04

At a prxima!

Aula 5
Aula 05 - CSS: Fontes e
Cores
CSS: Fontes e Cores

Dando continuidade ao assunto CSS, iremos nos aprofundar nas propriedades de fontes e
cores. Veremos tambm como formado o cdigo hexadecimal. Vamos logo ao que
interessa. Senta que l vem a histria!

Sem Frescura

1. Por que em alguns casos vejo fontes

descritas na propriedade font-family,
entre aspas? Por exemplo: "Trebuchet
MS"?

Sempre que voc for citar fontes na

propriedade font-family que tenha mdois
nomes, voc deve colocar entre aspas. Por
exemplo, a fonte Arial um nome nico,
no vem acompanhado por nenhum outro
nome. J "Courier New" no, um nome
composto por duas palavras, "Courier" e
"New", logo exigido que o nome completo
fique entre aspas.

2. Ento coloco ali em font-family uma lista de fontes seguindo uma prioridade?

Sim, ele serve como lista de prioridades para a fonte. Primeiro voc coloca a que
realmente voc deseja que aparea, a mais adequada, bonita, j a segunda fonte que
voc for citar a que pode substituir a primeira fonte, caso no haja a primeira fonte no
sistema do usurio.

3. Mas, vem c, eu nunca vi essa tal fonte serif e sans-serif. Acho que no tem no
meu computador...

Opa, no, serif e sans-serif no so nomes de fonte. So apenas dois estilos de fonte,
serifada e no serifada. Acontece que ao especificar isso no seu CSS, o navegador ir
interpretar que ali est sendo pedido uma fonte sem serifa ou serifada de acordo com o
padro do navegador.

4. Existe regra pra escolher entre sans-serif e serif?

Tecnicamente no. A escolha visual. Porm, estudando a teoria do design e da

tipologia podemos notar diferenas importantes nesses dois estilos, referentes a imagem
e sentimento. No Curso de Design Web e no Curso de Identidade Visual abordamos esse
assunto.
5. E quanto ao tamanho das fontes, se eu colocar um tamanho de fonte em body,
isso quer dizer que mudo o tamanho de todas as fontes?

Exatamente. Imagina o body como uma caixa e os demais elementos dentro dessa caixa.
Tudo que voc fizer na caixa principal, no caso o body, ir influenciar em tudo que est
dentro dessa caixa. No caso, todas as fontes de todos os elementos contidos no body
iro ser alterados. a lei da herana. O filho puxa ao pai. ;)

6. Qual a diferena entre "em" e "%"?

So maneiras diferentes de fazer a mesma coisa. Ambos trabalham com tamanho

relativo. Use a que voc preferir. Eu prefiro a porcentagem pois estou mais habituado
com ela.

7. Notei que h1 tem um tamanho, h2 outro e por a vai. Afinal, qual o tamanho
padro desses ttulos?

Isso vai depender do navegador mas normalmente o h1 200% maior que o tamanho de
fonte especificado em body. H2 150%, h3 120%, h4 100%, h5 90%, h6 60%.

8. E se no body eu usar um tamanho em porcentagem? 90% por exemplo.

Se voc fizesse isso, o navegador iria considerar que o tamanho da fonte deve ser 90%
relativo ao tamanho padro do navegador. Isso pode variar mas normalmente esse
tamanho padro de 16px. Logo, 90 % seria um tamanho igual a 14px.

9. No vdeo voc fala em trs formas de especificar cores. Mas s falou de duas
formas. Qual a terceira?

No falei a terceira s para voc vir aqui me perguntar. :) A terceira forma que muito
difcil de se ver por a o rgb ( 0, 0, 0 ). Onde cada nmero corresponde a uma
tonalidade de cor no padro RGB. Exemplo rgb ( 299, 109, 35 ).

10. Como combinar a melhor cor? A melhor harmonia?

Isso algo bem complexo para se responder em poucas linhas. Esse assunto diz respeito
a teoria de cores, que aprendemos no s na psiicologia como tambm no design e
comunicao visual. No Curso de Design Web temos algumas aulas somente a respeito
de cor. O professor recomenda. ;)

11. Por que color e no font-color?

Essa propriedade corresponde a cor do primeiro plano, ento ele vai mudar a cor do
texto e da borda, sendo que se voc quiser uma cor especfica para a borda, pode utilizar
o border-color.

Resumo!!!
 O uso do CSS ir facilitar sua vida no controle de tudo que diz
respeito a aparncia de fontes, podendo mudar o seu tipo, cor,
tamanho e estilo.
A propriedade fonte-family o conjunto de fontes que compartilham
caractersticas comuns.

As famlias de fontes so: serifa, sem serifa, monoespaada, cursiva e

fantasia. As fontes com e sem serifa so as mais utilizadas.

As fontes designadas em font-family s sero vistas se os visitantes

do seu site tiverem a fonte especificada instalada em seus sistemas.

Na listagem de fontes de font-family sempre coloque o estilo ( sans-

serif ou serif ) para garantir que o navegador coloque uma fonte
padro no mesmo estilo das demais, caso ele no encontre as outras
fontes instaladas no computador do visitante.

Existem 4 formas de especificar o tamanho das fontes: em pixels

(px), em escala (em), porcentagem (%) ou palavra-chave (small,
medium, large, etc).

Ao especificar o tamanho da fonte em pixels, voc est dizendo ao

navegador quantos pixels dever ter a altura de suas letras.

J em escala ( em) e porcentagem (%), so tamanhos relativos, sendo

portanto um tamanho relativo ao tamanho da fonte do elemento
anterior.

O uso do tamanho relativo bom pois ir facilitar a manuteno de

suas pgina. Bastar mudar um valor para mudar todos os outros
tamanhos de fonte especificados em seu CSS.

O uso de palavras-chave interessante quando voc deseja que o

tamanho seja escalonado pelo navegador e pelo prprio usurio,
podendo diminuir ou aumentar seu texto.

Para colocar seu texto em negrito, use a propriedade CSS font-weight

Para texto inclinado ou itlico, utilize a propriedade font-style

As cores utilizadas no CSS so resultado do padro RGB, nada mais

que a mistura das cores vermelho, verde e azul ( Red Green Blue).

Essa bsica mas no se esquea: a mistura de 100% de vermelho,

verde e azul tem como resultado o branco.

J a mistura de 0% de vermelho, verde e azul tem como resultado o

preto.

As CSS tem 17 cores pr-definidas incluindo black, white, red, blue e

green.

Os cdigos hexadecimais possuem 6 dgitos e cada dgito pode ser de

0 a F. Os primeiros dois dgitos representam os tons de vermelho, os
dois segundos os tons de verde e os dois ltimos os tons de azul.

Para sublinhar um texto, utilize a propriedade text-decoration.

Dever de casa
Aqui est nosso dever de casa contendo tambm as respostas dos exerccios da ltima
aula.

Divirta-se-> Exerccios da Aula 05

At a prxima!

Aula 06 - CSS:
Caixas
CSS: Caixas

Hoje iremos aprender mais sobre caixas, margens, bordas e enchimentos. Prepare-se,
estamos a um passo das divs e do nosso PSD. Vamos logo ao que interessa. Senta que l
vem a histria!

Sem Frescura

1. Ei Bruno! Ei! Po! Qual a diferena entre margin e padding, mano?

Bem, "mano", a propriedade margin nada mais que a margem externa. Voc ir utilizar
quando quiser dar um espao entre um elemento e outro da pgina. J o padding a
margem interna ou enchimento. Ser o espao entre a borda da caixa e o contedo da
pgina, que pode ser um texto, imagem ou tabela.

2. Mas o padding obrigatrio sempre que tiver uma caixa visvel graas a uma
cor de fundo ou borda?

No obrigatrio. Mas a prevalece as regras do design, nada de texto colado em borda,

ok? Somente se a sua criao exigir isso, mas texto colado em borda, sem o uso de
padding, denota amadorismo. No Curso de Design Web falamos mais o porqu disso.

3. Fess, fess! Existe estilo pro padding e margin sem ser somente o tamanho do
espao?

No, s tem o tamanho mesmo. Nada de pintar o espao do enchimento ou qualquer

outra firula. O espao do enchimento e da margem so transparentes, logo herdar a cor
do fundo do elemento que contem o margin ou padding.

Estilos de Borda
Agora voc vai conhecer os 8 estilos de borda que voc poder usar como valor da
propriedade "border-style".

Este aqui o estilo "solid", uma moldura normal, linhazinha reta, sem efeitos.

Este o estilo "double", duas linhas apaixonadas que resolveram se "ajuntar".

J o "groove" parece uma ranhura, uma pequena depresso.

O estilo "outset" d uma idia de 3D, um boto.

J o estilo "dotted" parece um luminoso com luzinhas redondas

O estilo "dashed" parece um picote, de recorte, todo tracejado

O estilo "inset" o contrrio do "outset", obviamente. Se assemelha a um boto
pressionado.

O "ridge" parece uma moldura de quadro

Dever de casa
Aqui est nosso dever de casa contendo tambm as respostas dos exerccios da ltima
aula.

Divirta-se-> Exerccios da Aula 06

At a prxima!

Aula 07 - IDs
e CSS
CSS: IDs e DIVs

Hoje dia de comear a trabalhar com Divs. Antes iremos conhecer um outro atributo, o
ID. Ele bem parecido com o class, mas voc entender a diferena entre ID e Class
assistindo a nossa vdeo-aula de hoje. Ento senta, senta que l vem a histria!

Sem Frescura
1. Ah, eu vou continuar usando class pois no vi diferena entre class e id...
, se voc for uma pessoa desorganizada, que deseja ter seu cdigo todo esculhambado,
ento v em frente. Utilizar o id quando o elemento for nico evitar alguns problemas,
principalmente quando voc necessitar posicion-lo. Veremos mais sobre isso l na
frente.

2. Posso usar uma classe dentro de um id?

Pode. Voc poder usar uma classe dentro de um id. Um exemplo: #id .nomedaclasse.
Iremos trabalhar muito com isso quando comearmos a montar o layout. Aguarde.

Resumo o o o (Caixas e IDs)

Para controlar a exibio dos elementos, as CSS o encaram sempre
como caixas.
Toda caixa possui rea de contedo, enchimento, borda e margem,
sempre opcionais.

O contedo do elemento se encontra na rea de contedo.

O enchimento importante para destacar o contedo, criando em

volta da rea uma moldura transparente.

A borda importante para deixar claro uma separao visual do

contedo. Porm, borda no obrigatrio.

A margem o espao externo cuja finalidade separar os elementos

da pgina

Ao utilizar fundo no elemento, seja em cor ou imagem, este ir

aparecer por trs do contedo e enchimento, nunca atrs da
margem.

A largura de um enchimento ou margem pode ser definido em pixels

ou porcentagem.

J a borda pode ser definido em thin, medium, thick ou em pixels.

H oito estilos diferentes para as bordas, solid, double, groove,

outset, dotted, dashed, inset e ridge

Na CSS voc poder definir em uma linha todas as definies de

enchimento, margem e borda ou ento definlos separadamente.

Para aumentar a separao das linhas de texto, utilize a propriedade

"line-height"

Para utilizar imagem como fundo do elemento, utilize a propriedade

"background-image"

Utilize as propriedades "background-position" e "background-repeat"

para definir a posio e o comportamento de repetio da imagem do
fundo.

Utilize class quando voc for utilizar esta regra para muitos
elementos.
 Utilize o ID quando voc for utilizar esta regra para um elemento, sem
necessidade de repetio.

No CSS, voc dever identificar um id utilizando o smbolo #.

Um id poder ter vrias classes.

Dever de casa
Aqui est nosso dever de casa contendo tambm as respostas dos exerccios da ltima
aula.

Divirta-se-> Exerccios da Aula 07

At a prxima!

Aula 08
Layout de 3 linhas e 2 colunas

Vamos ento comear logo o que interessa! O layout do Astrogildo, c pra ns, t muito
feio. Ele me pediu que mudasse o layout, deixasse mais bonitinho e isso que iremos
fazer na aula de hoje. Vejam a preparao de um layout com 3 linhas ( topo, contedo e
rodap ) com duas colunas ( coluna do menu e coluna central ). Na prxima aula
veremos a montagem desse layout utilizando XHTML e CSS, onde voc poder tirar
algumas dvidas e aprender coisas novas sobre o assunto.
Dever de casa
Que tal tentar recortar o layout apresentado hoje? Topa o desafio? Ento faa o
download do layout, tente recortar e compare com as prximas aulas onde irei recortar e
montar o layout do Astrogildo.

Download aqui

A resoluo das questes da aula 07 sero disponibilizados na aula 09 onde teremos mais
exerccios em nossa apostila

At a prxima!
Aula 09 - Layout 3x2 -
Recorte - Parte I
Layout de 3 linhas e 2 colunas
O Recorte - Parte I

! Chegou o grande dia! A hora de recortar o layout do nosso querido Astrogildo!

Bem, foi um pouco trabalhoso. Por isso dividimos em dois "programas". Nessa primeira
parte irei recortar o layout e montar, ficando bem visualizado no Firefox. J na prxima
aula irei continuar, mostrando como colocar o logotipo do site vazado e como criar uma
folha de estilo destinado a navegadores que nos do um certo "trabalho" ( , estou
falando do Internet Explorer mesmo ;) ). Ento vamos l, mos a obra!

Ento senta, senta que l vem a histria!

Dever de casa
Aqui est nosso dever de casa contendo tambm as respostas dos exerccios da ltima
aula.

Divirta-se-> Exerccios da Aula 09

At a prxima!

Aula 10 - Layout 3x2 -

Recorte - ParteII
Layout de 3 linhas e 2 colunas
O Recorte - Parte II

Agora vamos continuar o que comeamos na ltima aula. Hoje iremos aprender como
utilizar vrios estilos numa pgina s, procurando resolver a incompatibilidade com
Internet Explorer. Iremos aprender tambm como deixar a div flutuando pela pgina.
Ento senta, senta que l vem a histria!
Download do Layout
Veja o index.html e o css desta aula. Download aqui.

Pegando um atalho: sintetizando a propriedade

Essa dica para voc que deseja economizar tempo. Voc j deve ter notado que em
algumas aulas utilizei uma forma diferente de dizer os valores de padding, margin, font
ou background. Por exemplo, ao invs de criar um margin-top: 8px, margin-left: 10px,
margin-bottom: 8px, margin-right: 10px, coloquei tudo numa linha s, resumindo num
simples margin: 8px 10px 8px 10px. Vou mostrar para voc como funciona isso.

Primeiro veja um exemplo de sintese para padding. O jeito "formal" de se dizer os

valores de enchimento assim:

padding-top: 10px;
padding-right: 20px;
padding-bottom: 15px;
padding-left: 5px;

Podemos resumir isso tudo numa linha s, seguindo a ordem top, right, bottom, left. No
nosso exemplo, ficaria assim:

padding: 10px 20px 15px 5px;

Note que no foi necessrio colocar vrgula entre os valores, apenas espaos. Para vc
decorar essa ordem, basta lembrar do relgio abaixo:
 Existem quatro valores para a propriedade position: static, absolute,
fixed e relative

O posicionamento padro o static. Isso faz com que o elemento

fique um embaixo do outro.

O posicionamento "absolute" faz com que a div flutue pela pgina,

podendo posicion-lo em qualquer ponto do layout. Seu
posicionamento em relao ao topo e a margem esquerda. J se a
div estiver agrupada em outra div, o posicionamento ser em relao
a margem esquerda e topo desta div.

Utilizamos as propriedades top, right, bottom e left para

posicionarmos divs absolutos, fixos e relativos.

Para colocar divs absolutos um em cima dos outros, utilizamos a

propriedade z-index.

Dever de casa
Aqui est nosso dever de casa contendo tambm as respostas dos exerccios da ltima
aula.

Divirta-se-> Exerccios da Aula 10

At a prxima!

Aula 11 - Layout de 3 linhas e 3

colunas do Hades Junior

Layout de 3 linhas e 3 colunas do Hades Junior

O Recorte - Parte I

ba! Chegou a hora de montar o layout de 3 colunas e 3 linhas! Ficou curioso? Ento
senta, senta que l vem a histria!

Download do Layout Recortado

Ser que consegui concluir a montagem do site? Assista o vdeo! Quando eu concluir,
irei disponibilizar todos os arquivos aqui! ;)

QUIZ CSS!
Agora vamos nos divertir? Ento bora responder este quiz do Maujor, respondendo 10
perguntas bsicas sobre CSS. Imagino que a essa altura voc j saiba responder as 10
questes perfeitamente. No me faa pagar mico, hein? Aluno meu tem que sair daqui
expert. Ento clique aqui para fazer o Quiz e boa sorte!

At a prxima!

Aula 12
Layout de 3 linhas e 3 colunas do Hades Junior
O Recorte - Parte II

Agora sim, vamos montar pra valer o layout do Hades! Na ltima aula voc pode ver
que escolhi o formato de layout fludo para que o site possa se adaptar a qualquer
resoluo. Ser que deu certo?. Bora ver? Ento senta, senta que l vem a histria

Download do Layout Recortado

Ser que consegui concluir a montagem do site? Assista o vdeo! Quando eu concluir,
irei disponibilizar todos os arquivos aqui! ;)

Layout: fixo, lquido/fludo ou elstico?

Veja nesse texto do portugus Ivo Gomes ( www.ivogomes.com ) os pontos positivos e

negativos do layout fixo e do layout fludo.

Ao conceber ou redesenhar um website, normalmente coloca-se sempre esta dvida: o

layout vai ser fixo ou lquido?

Um layout fixo permite ter mais controle sobre o website porque as pginas tero
sempre a mesma largura e os contedos iro comportar-se sempre da mesma maneira.
Um layout lquido ou fludo permite que a pgina se adapte largura do ecr do
utilizador, ocupando todo o espao visvel em vez de ficar encostada a um canto ou
centrada como acontece com os layouts fixos.

Ambas as solues tm os seus pontos positivos e negativos.

Layout Fixo
Pontos positivos:
O webdesigner tem controle sobre a forma como a informao
apresentada;
As linhas de texto tm uma largura fixa e curta, o que facilita a leitura
de texto no video;

Pontos negativos:
Num video com uma resoluo grande, o website fica encostado a um
dos lados ou centrado na pgina, com muito espao disponvel sua
volta;
Menor acessibilidade, uma vez que o layout no se adapta s
necessidades do utilizador;

Layout Lquido/Fludo
Pontos positivos:
Maior acessibilidade. Os contedos adaptam-se melhor resoluo
de video do utilziador;
Os contedos ocupam toda a rea visvel do video, permitindo
transmitir mais informao;

Deixa de haver espao vazio volta do website;

Pontos negativos:
Maior dificuldade na leitura de linhas de texto demasiado longas;
Perde-se o controle sobre o posicionamento de alguns elementos na
pgina;

No se pode dizer que um dos layouts seja melhor do que o outro porque ambos so
opes vlidas, dependendo do contexto do website que estamos a desenvolver. No
entanto, existe um ponto intermdio: o layout elstico.

Layout Elstico
Este tipo de layout uma mistura do layout fixo com o layout lquido/fludo. Ou seja, a
largura da pgina extensvel at um certo ponto a partir do qual se torna fixa. Na
prtica, isto significa que podemos ter uma pgina que tenha uma largura mnima de
800px e uma largura mxima de 1280px. A partir dos 800px para baixo ou dos 1280px
para cima (valores de exemplo), a largura no se altera e a pgina funciona como uma
pgina com layout fixo.

Isto permite ter, ao mesmo tempo, controle dos elementos na pgina por parte do
webdesigner e controle da largura da janela por parte do utilizador, eliminando assim
alguns pontos negativos identificados nos dois tipos de layouts anteriores.

Outro fator interessante o fato de, num monitor com uma largura muito grande (vamos
imaginar um video com 2028px de largura ) o nosso website elstico ocuparia cerca
de metade do video e o texto poderia tornar-se demasiado pequeno para se conseguir ler.
Ao aumentar o tamanho do texto no browser (Firefox: CTRL+), a largura da pgina ir
aumentar na mesma escala. Desta forma, o website ir aumentar a sua largura mxima
consoante o tamanho do texto!

Para conseguir este efeito, basta definir a largura mxima da pgina em unidades EM.
Desta forma, a largura da pgina ir comportar-se da mesma forma como o tamanho do
texto, ou seja, responde aos comandos do utilizador para aumentar ou diminuir o seu
tamanho.

Se tiverem um monitor com uma resoluo grande (superior a 1024px) podem

experimentar aumentar o tamanho do texto agora e vero que a largura desta mesma
pgina ir acompanhar o aumento do texto. Caso a largura da janela seja inferior a
1024px, a pgina mantm-se fixa e o texto aumenta.

Dever de casa
Agora sim, as respostas corretas da aula 10! ;)

Divirta-se-> Exerccios da Aula 11

At a prxima!

Aula 13
Layout de 3 linhas e 3 colunas do Hades Junior
O Recorte - Parte Final

Finalmente finalizamos o layout do Hades Junior e ainda passamos pelo W3C. Ser que
eles validaram? Veja com seus prprios olhos!

Download do Layout Recortado

Agora sim! Faa o download do layout clicando aqui

Dever de casa

Divirta-se-> Exerccios da Aula 13

At a prxima!
 Aula 15
Anlise do Desafio Final

Aqui est a anlise do nosso desafio final! Senta, senta que l vem a histria!

Palavras Finais
Assista o vdeo para ouvir minhas palavras finais sobre o curso. ;)

Download do Layout Recortado

Faa o download do layout e minha proposta clicando aqui
Dever de casa - Verso Completa

Estou disponibilizando para vocs a verso completa dos nossos exerccios -> Aqui
est!

Querido aluno, foi bom estar com voc, brincar com voc, deixar correr solto o que a
gente quiser, afinal, em qualquer faz de conta a gente apronta e bom ser moleque
enquanto puder.

Sucesso!

Para o alto e Avante!

Prof. Bruno Tibrcio