Web Site

As provas práticas e teóricas desse bimestre avaliará os seguintes conteúdos:

XHTML

• Formulários
• Tabelas

CSS

• Estilização de formulários
• Estilização de tabelas

Utilizando os conceitos aprendidos em sala de aula sobre XHTML e CSS estruture o formulário a seguir e desenvolva 4 estilos de formatação para o mesmo. Atenção: Cada imagem é o resultado de um tema. Utilize a opção para alternar entre os estilos conforme aprendemos em aula.

Orientações:

• Clique na imagens para ampliá-las.
• Faça download das imagens utilizadas nas formatações do formulário clicando aqui.
• Para cada layout foi disponibilizado uma série de cores em hexadecimal, são apenas sugestões, utilize sua criatividade para alterá-las se achar necessário.

Desenvolver em XHTML e CSS as tabelas que estão representadas nas figuras abaixo. Cliquem na imagem para aumentar.

[update]

As imagem de checked/checado pode ser encontrada aqui: http://files.edysegura.com/aulas/website/icon-check.gif

Cor da primeira linha: #F4F9FD
Cor da segunda linha: #FFF
Cor da linha quando o mouse estiver por cima (hover): #F2F2F2
Cor do texto na sessão cabeçalho da tabela (thead): #7A9FB9
Cor do preço na sessão rodapé (tfoot): #945162
Cor do texto na sessão corpo da tabela (tbody): #737E84

Obs: As cores e imagem são apenas “sugestões”. Utilize a sua criatividade para alterar as cores e a imagem e a formate um novo tema! Lembre-se que na segunda tabela é necessário o uso de rowspan e colspan.

Desenvolver formulários XHTML + CSS como as imagens abaixo, para obter as imagens de background é só fazer o download do arquivo trabalho-forms.zip:

Aproveitando o ritmo das nossas aulas, vejam o que eu encontrei navegando pela internet: 30 Exceptional CSS Navigation Techniques

Listas são muito úteis quando trabalhamos com estruturação de menus, lista de nomes, lista de artigos e listas em geral.

Para conhecer as propriedades CSS para lista acessem esse endereço: A propriedade list

Veja os exemplos abaixo do que podemos fazer com listas XHTML + CSS:

• List a Matic
• Listas + CSS
• Listas + CSS II
• Listas + CSS III
• Exemplos de Listas + CSS
• Lista de sites úteis sobre Listas + CSS

[update]
Exemplos para download:

• Menus na vertical
• Menus na horizontal

As pseudo-classes complementam seletores CSS com a finalidade de estilizar informações que não fazem parte da estrutura XHTML. Em sala de aula veremos exemplos práticos sobre as pseudo-classes CSS.

Visita obrigatória para obter mais informações:

• Pseudo-classes do CSS via Tableless
• Seletores Complexos via Tableless
• Seletores Agrupados e Encadeados vai Tableless

A propriedade background da CSS, destina-se a definir uma cor ou uma imagem de fundo para uma tag da (X)HTML.

As propriedades  para estilizar fundos são: background-color, background-image, background-repeat, background-attachment, background-position e background.

Em sala de aula veremos exemplos práticos do uso dessas propriedades da CSS.

Entender como funciona o Box Model é essencial para aqueles que querem começar o desenvolvimento web utilizando CSS. Os elementos na página são renderizados como retângulos, então, todas as tags HTML funcionam como caixas, e essas caixas são formadas por 4 áreas retangulares que são as seguintes:

• Conteúdo
• Espaçamentos (padding)
• Bordas (border)
• Margens (margin)

Mais informações sobre o Box Model vocês podem encontrar nesse excelente blog sobre CSS: CSS no Lanche

[update]

Vejam também: Diferenças entre Margin e Padding.