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
As provas práticas e teóricas desse bimestre avaliará os seguintes conteúdos:
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:
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:
[update]
Exemplos para download:
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:
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:
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.