Web Site

Download dos arquivos para realização da prova prática:

• Arquivos para prova

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.

O elemento table tem a finalidade de apresentar dados tabulares como, por exemplo, informações tabulares sobre pesos, medidas, preços, tabela de dados em gerais e etc. Tabelas devem ser utilizadas para organizar e apresentar dados

Este será o nosso foco nas próxima aulas, aprender a usar tabelas para o que elas foram criadas para fazer; Apresentar dados tabulares. E não para estruturar layouts.

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

Formulários são a base para sites que tem por objetivo oferecer uma maior interatividade com os usuários. Entre os vários usos de formulários podemos citar o envio de mensagens, pesquisas e cadastros em geral.

Segundo Diego Eis, o formulário depois do link é o elemento mais utilizado pelos usuários para interagir com o site. Ele postou um vídeo de como desenvolver um formulário em 8 minutos.

Nas nossas próximas aulas estudaremos a estruturação e estilização dos formulários. Não faltem!

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