Laboratório de Informática 1 e 2 (2009)

Neste exercício você deverá desenvolver seu primeiro Web Site para aplicar, na prática o que vimos até agora na disciplina. Este Web Site será no formato de apresentação, como se fosse um arquivo PowerPoint. Você deverá criar 5 páginas  para este web site.
O Tema
O tema será escolhido dentre as opções listadas na planilha a [...]

CSS Sprite é uma técnica comum para a criação de menus, botões e montagem em geral de sua interface.
Dois exemplos da técnica vão a seguir:

Exemplo CSS Sprite
Exemplo CSS Sprite 2

A) Crie um botão em HTML/CSS utilizando a imagem em anexo.
Observe que o botão possui 3 estados: normal, visitado e quando o mouse passa sobre ele.
Para [...]

O Box Model é a maneira que o CSS representa as dimensões e espaçamentos dos elementos da tela. Esta aula é sobre este modelo. As principais propriedades relacionadas ao box model são:

margin-top, margin-right, margin-bottom, margin-left, margin: determina a margem de um elemento;

padding-top, padding-right, padding-bottom, padding-left, padding: determina o “enchimento” (espaçamento) de um elemento.

border-top-color, border-top-style, border-top-width, [...]

Pedido por alguns alunos no fim da aula de 10/6:
http://www.electricprism.com/aeron/slideshow/

Arquivos para o Exercício!
Enunciado do exercício
http://docs.google.com/View?id=ajggmrkzh2pb_1051hrhcnqfg
Entrega em: http://spreadsheets.google.com/viewform?formkey=cmFlYmhkeHgybTdpd1BwNG04N2oydnc6MA..
Carregando…
Entrega até: 16/jun às 18:00h

Existem diversas maneiras de representar cores em CSS.
Esta aula é para conhecermos estas abordagens.

Cor em #RRGGBB
Cor em #RGB
Cor em rgb(rrr.rr%, ggg.gg%, bbb.bb%)
Cor em rgb(rrr, ggg, bbb)
Cor como palavra-chave;
Cores do sistema operacional;
Cores em rgba(rrr,ggg,bbb,a) ;
Cores em hsl(h, s%, l%).

Apresentação referente à aula

O objetivo agora é trabalhar com as propriedades de alteração de texto em CSS.
Algumas destas propriedades são:

letter-spacing: espaçamento das letras do texto;
word-spacing: espaçamento das palavras do texto;
line-height: altura das linhas;
text-align: alinhamento horizontal;
text-decoration: efeitos em texto;
text-indent: distanciamento da 1ª linha do texto;
text-transform: controla a capitalização do texto;
text-shadow: especifica o efeito de sombra em um texto;
vertical-align: alinhamento [...]