Conteúdo do DVD:

Introdução ao CSS
* Apresentação do instrutor
* O que é CSS e quais suas vantagens
* As desvantagens de não usar CSS
* Devemos excluir as tabelas de nossos projetos?

Inserindo estilo na página

* Inserindo estilo internamente
* Inserindo estilo usando @import
* Inserindo estilo usando link href

Clique aqui e veja toda a postagem



Entendendo a folha de estilo

* O que é seletor
* O que é propriedade
* O que são valores
* Propriedade padding
* Propriedade margin
* Otimização de valores

Propriedade font

* font-family
* font-color
* font-weight
* font-size
* Otimização de estilos

Propriedade text

* text-align
o Text-align:right
o Text-align:left
o Text-align:center
o Text-align:justify
* text-transform
o text-transform:uppercase
o text-transform:lowercase
o text-transform:capitalize
* text-decoration:
o text-decoration:underline
o text-decoration:overline
o text-decoration:line-through

Propriedade background

* background:
o background-color:
o background-image:
o background-repeat:
o background-position:
+ background-position:left
+ background-position:right
+ background-position:top
+ background-position:bottom
o Aplicando degradê como background
+ Background fluído
+ Integração background fluído e background-color

Propriedade border

* Border-color
* Border-style
* Border-top
* Border-left
* Border-right
* Border-bottom

Divs e classes

* O que são divs e classes
* Empregando divs no documento
* A importância dos comentários no documento
* Inserindo uma div dentro de outra
* Div fluída(para todas resoluções de tela)
* Centralizando site no meio da tela
* Trabalhando com classes
o Empregando a classe no elemento

Propriedade float e estrutura de 2 colunas

* Para que servem
* float:left
* float:right
* hack divclear com clear:both
* Flutuando o rodapé e clear:both

Propriedade overflow

* Para que serve
* Overflow:scroll
* Overflow:auto
* Overflow-x:
* Overflow-y:
* Eliminando barra de rolagem do site todo:

Layout com 3 colunas

* linkando folha de estilo
* Criando estrutura com divs.
o Criando div geral
o Criando div topo
o Criando div menu
o Criando div barra lateral esquerda
o Criando div conteúdo central
o Criando div barra lateral direita
o Criando div rodapé
* Dando forma à estrutura através da folha de estilo
* Criando layout com 3 colunas utilizando as propriedades ensinadas anteriormente

Pseudoclasses

* O que são
* Pseudoclasse hover
* Pseudoclasse active
* Pseudoclasse visited

Propriedade list

* O que é
* Tipos de listas
o Listas não ordanadas
o Definindo cor para background da UL e LI
o list-style-image:
o list-style-position:
+ inside
+ outside
o list-style-type:
+ Disc
+ circle
+ square
o Listas não ordenadas
+ Definindo as OL´s
+ list-style-type
# decimal
# lower-roman (listas em algarismos romanos minúscolas)
# upper-roman (listas em algarismos romanos maiúsculas)
# lower-alpha (listas em ordem alfabética minúscolas)
# upper-alpha (listas em ordem alfabética maiúsculas)
* Resumindo valores da propriedade list
* Usando listas para criar um menu
o Display:block
o Display:inline

Menu horizontal

* Empregando as listas no documento
* Formatando ul
* Formatando li
* Formatando li a
* Formatando li a:hover
* Efeitos de bordas nos menus
* Testando o menu no IE6
* Background-image para menu
* Testando o menu no IE6

Menu vertical

* Empregando as listas no documento
* Formatando ul
* Formatando li
* Formatando li a
* Formatando li a:hover
* Manipulando background-image nos menus
* Testando menu no IE6

Otimizando folha de estilo

* Estilos agrupados
* Códigos pequenos

Desenvolvendo projeto final

* Apresentação
* A importância de trabalhar com imagens leves
* Exportando de forma correta layout do fireworks
o Exportando topo do layout
o Exportando logomarca do layout
o Exportando menu do layout
o Exportando banner
o Exportando background do conteúdo
o Exportando background da sidebar
o Mapeando áreas do layout para criação das divs
* Iniciando projeção da estrutura
o Criando a div topo
o Criando a div menu
o Criando a div imagem
o Criando a div conteudo
o Criando a div bloco-esquerdo
o Criando a div rodape
o Inserindo comentários nas divs
o Inserindo comentários nas divs
* Trabalhando a folha de estilo
o Resetando valores defaults dos elementos
o Definindo formatação do body
o Definindo formatação da div topo
o Inserindo logomarca do documento e definindo sua formatação
o Centralizando site
o Formatando h1 da logomarca
o Pseudo-topo usando background no body
o Definindo posição da logomarca
* Estruturando div do menu e da imagem
o Trabalhando com pseudo-topo para background do topo e menu
o Criando a div da imagem
* Testando conteúdo no IE6
* Validando código no W3C
* Criando coluna central
* Criando coluna da direita
* Flutuando blocos com float
* Desenvolvendo rodapé
* clear:both no rodapé
* Definindo background-image com cantos arredondados do conteúdo
* Div clear para bug do background-image sem height
* Organizando o conteúdo central
* Inserindo banner central
* Inserindo conteúdo central
* Formatando rodapé
* Inserindo imagem na div imagem
* Formatando a barra lateral direita
o Modificando margin da sidebar
o Aplicando o hack do display:inline para corrigir erro de margin duplicada
o Inserindo background de canto arredondado na sidebar
o Testando layout no IE6
o Organizando imagens da sidebar
o Aplicando class nas imagens
o Efeito de bordas duplas nas imagens
o Formatando informações da empresa na sidebar
o Criando e formatando divs de navegação
o Empregando divclear:both no conteúdo
* Desenvolvendo o menu horizontal
o Inserindo as listas no documento
o Formatando ul
o Formatando li
o Formatando ul li a
o Formatando ul li a:hover
o Separando blocos da li usando a prática do border
o Criando efeitos a:hover com background no estilo windows vista
* Testando layout no IE 5.5, IE 6 e IE 7 e no IE 8.0
* Estilizando conteúdo da localização da empresa
* Criando páginas do site
o Modificando conteúdo de cada página
o Criando descrição das páginas
* Formatando o formulário de contato
* Validando folha de estilo
* Considerações finais e fim do curso