Bom primeiro eu vou mostrar como era uma tabela antiga sem semântica:

TITULO 1
TITULO 3
TITULO 3


TEXTO 1
TEXTO 2
TEXTO 3


RODAPÉ 1
RODAPÉ 2
RODAPÉ 3

Como vocês podem ver eu fiz uma tabela muito simples de 3 colunas , só para quem ainda não conhece eu vou explicar para que serve cada TAG.

<table> – A tag TABLE é o corpo da tabela dentro dela que vocês colocam todos os dados, ainda nele tem varias propriedades que podem ser integradas como cellpadding e cellspacing essas duas propriedades servem para tirar o espaçamento padrão que vem na TAG table e ainda tem várias propriedades que podem ser utilizadas.

<tr> – A tag TR ela sempre vem depois da TABLE porque ela é responsável de criar as colulas da tabela.

<td> – A tag TD ela é a celula da tabela é o lugar onde você o conteudos.

Agora é montar uma tabela seguindo as regras de semântica:

TITULO 1
TITULO 3
TITULO 3




RODAPÉ 1
RODAPÉ 2
RODAPÉ 3




TEXTO 1
TEXTO 2
TEXTO 3

Dá para ver como muda bastante mas estruturamente é a mesma mesma tabela somente o “ROPAPÉ” que mudou de lugar para ficar mais simples de entender eu vou explicar cada uma. As tags TABLE, TR, TD continuam mas agora adicionamos mais 4 tags e uma propriedade na tag TABLE.

SUMMARY – Essa propriedade serve para colocar “nome/titulo” da sua tabela.

<THEAD> -  essa tag é muito importânte porque nela que vai o cabeçalho da sua tabela.

<TFOOT> -  essa tag também é importate mesmo colocando ela abaixo da THEAD ela sempre vai ficar no rodapé da sua tabela.

<TH> -  essa th só funciona dentro da THEAD e TFOOT e o padrão dessa tag é negrito e centralizado.

<TBODY> – como o nome dela já diz ela é o corpo da sua tabela dentro dela podem ser colocadas as tags TR e TD.

Espero ter ajudado mas se vocês tiverem muitas dúvidas é só deixar um comentário ou mandar um email “chrdesigner@chrdesigner.com” que eu respondo até a proxima.

- Visualizar Exemplo

- Download do Arquivo

Então vamos começar o que interessa eu criei um HTML bem simples com uma class chamada “padrao” em cada DIV.

<div class=”padrao”>CSS PADRÃO – VISUALIZADO NO FIREFOX</div>
<div class=”padrao”>O MESMO CSS PADRÃO MAS AGORA COM O IF PARA O IE 6</div>
<div class=”padrao”>O MESMO CSS PADRÃO MAS AGORA COM O IF PARA O IE 7</div>
<div class=”padrao”>O MESMO CSS PADRÃO MAS AGORA COM O IF PARA O IE 8</div>

depois de criada as DIV’s agora nós vamos criar um css chamado “padrao.css” e colocar ele dentro de uma pasta chamada css “eu gosto de sempre separar por pastas as coisas, tipo”css, js, imagens, etc’  ficá muito mas fácil de achar depois “

.padrao{
width:120px;   /*determina a largura da div*/
height:160px;   /*determina a altura da div*/
background:#ededed;   /*determina a cor do fundo da div*/
float:left;   /*determina que a div vai ficar a esquerda*/
border:1px solid red;   /*determina uma borda de 1px de largura na div*/
margin:10px;  /*determina que a div vai ficar 10px de distância do topo, da direita e esquerda e do rodapé*/
font-family:Arial;   /*determina a familia da fonte como Verdana, Tahoma, etc…*/
font-size:11px;   /*determina que a fonte vai ter 11px de altura*/
text-align:justify;   /*determina que a fonte vai ficar no modo de formatação justificado*/
padding:10px;   /*determinada que o texto vai ficar a 10px de distância das bordas da div que ela se encontra*/
}

depois que criado o arquivo padrao.css vamos chamar o css na página desejada, antes de fechar a tag “</head>” vamos colocar a tag “<link>”

<link rel=”stylesheet” href=”css/padrao.css” type=”text/css” />

mas presta muita atenção no caminho do CSS se você estiver com dúvida qual o caminho certo é só prestar atenção no nome da pasta e do arquivo onde ele se encontra, o meu está na pasta CSS e com o nome padrao.css  -  ” href=”css/padrao.css” “

Depois que estiver tudo OK vamos colocar os IF’s para os IE’s eles vão abaixo do

“<link rel=”stylesheet” href=”css/padrao.css” type=”text/css” />”

que acabamos de colocar, primeiro eu vou colocar do IE 8 e também já criei o arquivo css com o nome ie8.css na pasta CSS.

<!–[if gte IE 8]>
<link rel=”stylesheet” href=”css/ie8.css” type=”text/css” />
<![endif]–>

eu fiz uma pequena alteração no css padrão que criamos primeiro só para ver funcionando, mas a class ainda é .padrao no css, porque esse IF ele funciona assim, ele compara os dois CSS ele vai checando linha por linha do css se ele vê que você alterou alguma coisa ele automaticamente já pega as propriedades do novo atributo que determinamos no novo css… mas tem que ter o mesmo nome de class senão ele vai pensar que é outra coisa e vai passar direto, da uma olhada como ficou.

.padrao{
background:#F17447;
border:1px solid #AD6B00;
}

se vocês perceberam eu só coloquei os atributos que eu alterei porque não tem necessidade de manter os atributos se são iguais.

Para finalizar eu vou colocar o IF do IE 7 e do IE 6:

<!–[if IE 7]>
<link rel=”stylesheet” href=”css/ie7.css” type=”text/css” />
<![endif]–>

<!–[if lt IE 7]>
<link rel=”stylesheet” href=”css/ie6.css” type=”text/css” />
<![endif]–>

vocês vão perguntar porque os dois estão escritos IE7 mas se prestar atenção no IF do IE6 tem um ” lt” o que isso significa, o lt é uma abreviação de “less than” isto é que esse if só vai funcionar se for “menor que o IE7″ .

para os CSS eu vou alterar só o background e a borda, criei um arquivo para cada um dentro da pasta css com os nomes:

ie7.css

.padrao{
background:#FFFBCC;
border:1px solid #E6DB55;
}

ie6.css

.padrao{
background:#94E2FF;
border:1px solid #464646;
}

Para que vocês tenhão uma idéia melhor de como ficou acessem do seu FireFox, IE 6, IE 7 e o IE 8 pra ver como que ficou as DIVs. Qualquer dúvida é só deixar um comentário que eu respondo o mais breve possível.

Visualizar -> CSS Condicional para IE 6, 7 e 8

Download -> CSS Condicional para IE 6, 7 e 8

Fonte: webdesignerdepot

Quem será ele ??? hahahah…

Bom então vamos começar a colocar a mão na massa, primeiro precisa determinar como vai ser a animação e a arte, se vocês quiserem usar o mesmo modelo que eu vou usar é só fazer o download aqui. Eu fiz uma coisa bem simples para postar aqui é o meu logo e vou fazer ele piscar é bem simples essa animação. Abaixo tem o JPG como ele é:

Depois que você já tiver com o PSD aberto no seu Photoshop vamos exportar para o ImageReady veja no exemplo abaixo:

Depois que já exportou para o ImageReady agora vamos ativar o “Animation” é com ele que nós vamos fazer nosso gif animado ele fica no menu “Window -> Animation” vai aparecer a barra de animação na parte inferior esquerda do seu monitor. Veja no exemplo abaixo:

Agora eu vou fazer cinco copias do primeiro frame clicando no botão “duplicates current frame” ele é o segundo da direita para a esquerda. Veja no exemplo abaixo:

Estamos quase finalizando nosso gif animado, eu vou fazer uma animação bem simples. Agora no primeiro frame vou ocultar a pasta “LOGO” que esta em “Layers” que ficá no canto direito inferior do monitor você vai ver que todos os outros frames ficaram vazios mas é assim mesmo, agora no segundo frame você ativa só a primeira layer da pasta “LOGO”, no terceiro frame ativa as duas layers, na quarta deixa vazia mesmo e na quinta ativa a pasta “LOGO”. Veja como esta ficando no exemplo de baixo:

Agora para finalizar só falta determinar qual vai ser a velocidade da nossa animação, porque como padrão o ImageReady é “zero milisegundos” dá uma olhada como ficá:

Para determinar a velocidade de apresentação é só clicar na setinha que esta junto com o texto “0 sec.” que ficá abaixo do frame que você criou, clique na setinha para aparecer uma caixinha com varias “velocidades de tempos, lembrando que é milisegundos “0.1″ e segundos “1.0″“, eu vou colocar 0.5 milisegundos para minha animação, mas se vocês quiserem outras velociades é só clicar em “Other…“. Veja no exemplo abaixo:

Para exportar nosso gif animado vocês tem que clicar em “File -> Save Optimized As… ou Ctrl+Shift+Alt+S”.

Veja como ficou nosso gif animado agora sé vocês quiserem ir inventando outras formas de apresentações, efeitos, etc… é só soltar seu lado criativo…hahahahaha…

Nessa primeira imagem se vocês clicarem nela vocês vão ver a primeira versão, nessa só funciona no FireFox e no IE não pega a borda arredondada por causa do “style:  -moz-border-radius“ não funciona no IE:

Clique sobre a imagem para ir na página de demonstração

	
	Esta funcionando no FireFox e não funciona no IE

Nessa segunda imagem se vocês clicarem nela vocês vão ver que está funcionando no FireFox e no IE também eu tive que adicionar um “style: behavior“ nela eu chamo um documento .htc para emular o “-moz-border-radius” no IE.

Clique sobre a imagem para ir na página de demonstração

	
	Esta funcionando no FireFox e no IE

Banner Vertical

120px x 240px

Banner Retangular

120px  x 60px

DHTML

300 px x  250px

Full Banner

468px  x 60px

Super Banner

728px  x 90px