Este exercício está baseado na aula sobre layout CSS e nos exemplos fornecidos na aula referente a este assunto.

1) Faça o download do arquivo a seguir:

Exemplos de layout

2) Este arquivo contém um conjunto de pastas. Em cada pasta há uma imagem que representa um layout a partir da imagem Resposta_1.png. Verifique que esta imagem é diferente em cada pasta e cada pasta possui um código diferente.

3) Escolha um código para resolver seu exercício cuja primeira letra seja igual à primeira letra de seu nome. Por exemplo, se seu nome é Jamanta, você pode escolher a pasta jm ou jv.

4) Recrie o mais próximo possível a interface fornecida na imagem Resposta_1.png. Observe que você deve recriar o formulário ao centro conforme a especificação listada. Cada imagem possui um layout diferente, também está especificado. O menu lateral deve obrigatoriamente, usar a imagem fornecida rollover.png em sua pasta.

IMPORTANTE: você deve formatar, dimensionar e posicionar seus elementos usando CSS. Outras alternativas: tabelas para layout, tags de formatação, etc, serão DESCONSIDERADAS.

Entregue, até 16/11/2009 sua resposta no espaço abaixo.

O objetivo agora é realizar alguns estudos de caso relacionados a tipos de layout que podem ser implementados através destas propriedades.

Apresentação referente à aula

Exemplos utilizados na aula:

• Layout de 2 colunas líquido
• Layout de 3 colunas líquido
• Formulário com TABELAS (sem CSS) – 1
• Formulário com TABELAS (sem CSS) – 2
• Formulário com TABELAS (sem CSS) – 3
• Formulário com alteração das bordas
• Formulário com alteração de bordas (correto)
• Formatando label, fieldset e legend
• Layout baseado em tabelas
• Layout baseado em parágrafos
• Layout baseado em listas
• Relembrando formatação de links
• Relembrando formatação de listas
• Exemplo de rollover com 2 imagens
• Exemplo de rollover com 1 imagem
• Exemplo de menu vertical

Imagens utilizadas nos exemplos:

Links para Layouts prontos em CSS:

• http://www.csseasy.com/
• http://layouts.ironmyers.com/
• http://www.code-sucks.com/css%20layouts/
• http://www.glish.com/css/
• http://www.intensivstation.ch/en/templates/

Links para frameworks CSS:

• http://www.blueprintcss.org/
• http://960.gs/
• http://developer.yahoo.com/yui/grids/
• http://delicious.com/bcp/css+framework

Links para geradores de layout:

http://developer.yahoo.com/yui/grids/builder/
http://www.positioniseverything.net/articles/pie-maker/pagemaker_form.php
http://builder.yaml.de/

Apresentação referente à aula

Trabalharemos na aula de hoje com as propriedades:

• float: determina o posicionamento de um elemento em relação ao fluxo;
• clear: controla o comportamento de um elemento em relação ao estado de float dos anteriores;
• position: tipo de posicionamento de um elemento;
• width: largura de um elemento, obrigatório nos elementos com float;
• left / right: distância em relação ao limite esquerdo ou direito do elemento sendo posicionado;
• top / bottom: distância em relação ao limite superior ou inferior do elemento sendo posicionado;

Exemplos referentes à aula:

• Posicionamento padrão, sem float
• Exemplo de aplicação de float:left
• Exemplo de float left com problema com o contâiner pai
• Uso do clear left
• Exemplo com float right
• Exemplo com clear right
• Aplicando a propriedade clear both
• Resolvendo o problema do container pai usando spacer
• Usando mais de um float
• Usando mais de um float (sem spacer)
• Usando mais de um float com float right
• Posicionamento estático
• Posicionamento relativo
• Posicionamento absoluto
• Posicionamento absoluto + relativo
• Posicionamento fixo
• Exemplo de layout de 2 colunas
• Exemplo de layout de 3 colunas

• 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 realizar este exercício você deve usar o código de aluno disponível na lista de alunos.

B) Crie uma composição qualquer utilizando os sprites disponíveis na imagem. Utilize, pelo menos, 25 sprites e 4 tipos de sprite diferentes.

Responder em: http://spreadsheets.google.com/viewform?formkey=cmhXMmxRSmpfWGV5c2wwbEp6MTdhYVE6MA..

• 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, border-top, border-right-color, border-right-style, border-right-width, border-right, border-bottom-color, border-bottom-style, border-bottom-width, border-bottom, border-left-color, border-left-style, border-left-width, border-left, border-color, border-style, border-width, border: modifica a borda de um elemento.
• outline-color, outline-style, outline-width, outline: determina a linha de contorno ao redor de um elemento;
• height: modifica a altura da área de conteúdo de um elemento;
• min-height: altura mínima de um elemento;
• max-height: altura máxima de um elemento;
• width: largura da área de conteúdo de um elemento;
• min-width: largura mínima da área de conteúdo de um bloco;
• max-width: largura máxima da área de conteúdo de um bloco;

Seguem os exemplos associados à aula:

• Exemplo Margem Padrão;
• Exemplo Margin
• Exemplo Margin Auto
• Exemplo Margin Em
• Exemplo Margin Negativa
• Exemplo Margin Porcentagem
• Exemplo Margin Resumida
• Exemplo Margin Resumida2
• Exemplo Border
• Exemplo Border Específica
• Exemplo Border Resumida
• Exemplo Box Model
• Exemplo Padding
• Exemplo Width Height
• Exemplo CSS Sprite
• Exemplo CSS Sprite 2

Imagens usadas durante a aula:

Apresentação referente à aula (no link).

Enunciado do exercício
http://docs.google.com/View?id=ajggmrkzh2pb_1051hrhcnqfg

Entrega em: http://spreadsheets.google.com/viewform?formkey=cmFlYmhkeHgybTdpd1BwNG04N2oydnc6MA..

Entrega até: 16/jun às 18:00h

• 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 vertical;
• white-space: controla o espaçamento em branco em um elemento;
• direction: especifica a direção de escrita;
• writing-mode(CSS3/IE8): define a direção do texto;
• text-overflow (CSS3/IE6): permite aplicar (…) em um texto que não serve em um elemento.

Os exemplos referentes à aula são:

• Exemplo letter-spacing
• Exemplo word-spacing
• Exemplo line-height
• Exemplo text-align
• Exemplo text-decoration
• Exemplo text-indent
• Exemplo text-transform
• Exemplo text-shadow
• Exemplo text-shadow emulado (IE, Firefox, etc)
• Exemplo vertical-align
• Exemplo white-space
• Exemplo direction
• Exemplo writing-mode
• Exemplo text-overflow
• Exemplo text-overflow emulado (Firefox)

Download da apresentação

O objetivo da aula de hoje é trabalhar com as propriedades do CSS referentes a tipografia, ou seja, que permitem a alteração de fontes.

Exemplos da aula:

• Fontes;
• Personalidade das fontes;
• Exemplo serifa;
• Exemplo serifa2;
• Propriedade font-family;
• Famílias genéricas;
• Propriedade font-size;
• font-size absoluto;
• font-size relativo;
• font-size comprimento absoluto;
• font-size comprimento relativo;
• font-size comprimento absoluto 2;
• font-size porcentagem;
• Propriedade font-weight;
• Propriedade font-style;
• Propriedade font-variant;
• Representação resumida.

Sobre a “personalidade” diferente de cada fonte, sugiro os vídeos (humor, em inglês):

• Conferência das fontes;
• Luta entre fontes.

Download da aula

Assim, uma prática solução que podemos usar para implementar os seletores do CSS 2.1 no Ie6 e resolver alguns problemas do ie7 é o uso de uma biblioteca de “emulação” de recursos como, por exemplo, a ie7-js .Esta biblioteca exige que se use a linguagem JavaScript, desta forma, não é aplicável em todos os cenários.

Para “transformar” seu ie6 em ie7, cole o seguinte fragmento de código no início da página:

<!–[if lt IE 7]>
<script src=”http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js”

type=”text/javascript“></script>
<![endif]–>

Se precisar “transformar” seu ie6 e 8 em ie8, cole o seguinte fragmento de código no início da página.

<!–[if lt IE 8]>
<script src=”http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js” type=”text/javascript“></script>
<![endif]–>

Independente do uso de qualquer biblioteca,verifique a tabela de compatibilidade para cada seletor em relação aos navegadores.

Segue, a seguir, os exemplos referentes à aula.

• Seletor universal (*);
• Seletor universal aplicado em CSS Reset;
• Seletor universal aplicado no debug do posicionamento dos elementos;
• Seletor filho (E > F);
• Seletor irmão adjacente (E + F);
• Pseudo-classe dinâmica hover (E:hover);
• Pseudo-classe dinâmica hover aplicada em links;
• Pseudo-classe dinâmica focus (E:focus);
• Pseudo-classe dinâmica focus aplicada em links;
• Pseudo-classe primeiro filho (E:first-child);
• Pseudo-classe lang (E:lang(C));
• Pseudo-elemento before (E:before);
• Pseudo-elemento after (E:after);
• Seletor atributo existente (E[atr]);
• Seletor atributo igualdade (E[atr=val]);
• Seletor atributo igualdade aplicado em itens de formulário;
• Seletor atributo espaço em branco (E[atr~=val]);
• Seletor atributo espaço em branco aplicado à classe;
• Seletor atributo prefixo (E[atr|=val]);
• Exemplo de uso da biblioteca ie7-js.

A seguir, faça o download da apresentação referente a aula (mirror).

Para a resolução destes exercícios você trabalhará apenas com o arquivo exercicio_css.html, disponibilizado no link.
Em momento algum você alterará esse arquivo, mexendo apenas dentro da seção marcada no código:
<style type=”text/css”>
/* Alterar apenas aqui o seu arquivo */
</style>

Na entrega de seu exercício objserve que cada resposta é independente entre si a não ser se informado em contrário! Ou seja: não coloque a resposta do A junto com a resposta do B, etc.

Entregue seu exercício via formulário do Google, colando apenas a regra ou as regras geradas, sem colocar a tag <style>!

A) Usando apenas uma regra e sem utilizar agrupamento de seletores, altere a cor e o fundo de todos os parágrafos contidos no texto;

B) Usando apenas uma regra e sem utilizar agrupamento de seletores, altere a cor e o fundo de todos os cabeçalhos contidos no texto;

C) Usando apenas uma regra e sem utilizar agrupamento de seletores, altere a cor e o fundo de todos os links que fazem parte de listas numeradas;

D) Usando apenas uma regra e sem utilizar agrupamento de seletores, altere a cor e o fundo de todos os links que fazem parte de listas numeradas e de listas não numeradas;

E) Usando apenas uma regra, altere a cor e o fundo de todos os links que fazem parte de qualquer tipo de lista;

F) Usando apenas uma regra e sem utilizar agrupamento de seletores, altere a cor, o fundo e a fonte de todas as abreviaturas que estiverem dentro de um elemento de classe igual a texto;

G) Usando apenas uma regra e sem utilizar agrupamento de seletores, altere a cor e o fundo de todos os links que fazem parte de listas numeradas após serem visitados;

H) Usando apenas uma regra e sem utilizar agrupamento de seletores, altere a cor e o fundo de todos os links que fazem parte de listas de definição após serem visitados;

I) Usando apenas uma regra e sem utilizar agrupamento de seletores, altere a cor e o fundo de todos os links que fazem parte de listas não numerada ao serem clicados;

J) Altere a fonte da primeira letra de todos os parágrafos;

K) Altere a cor da primeira letra de todos os parágrafos da classe texto;

Entrega do exercício (opcional):
http://spreadsheets.google.com/viewform?formkey=cm55WTg5NzY5OVlseGh4dFlvOF9sMnc6MA..

Exemplos da aula:

• Seletor de elemento
• Seletor de classe
• Seletor de id
• Agrupamento de seletores
• Seletor contextual
• Pseudo-classe âncora (:link)
• Pseudo-classe âncora (:visited)
• Pseudo-classe âncora (:active)
• Pseudo-elemento letra inicial (:first-letter)
• Pseudo-elemento primeira linha (:first-line)
• Exemplo de “Classititis”
• Seletores no jQuery

Segue a seguir e no link a apresentação referente à aula.

Existem 3 tipos de listas: ordenadas, não-ordenadas e listas de definição.
Veremos futuramente que as listas não serão úteis apenas para a exibição listagem de itens, mas também serão úteis na criação de menus e barras de navegação.

Os links, por sua vez, são um dos principais elementos que justificam o sucesso da web.

Os exemplos utilizados nesta aula são listados abaixo (baixar todos – mirror).

• Listas em HTML e CSS
• Listas em JavaScript
• Links em HTML
• Links em HTML
• Links em CSS

As imagens usadas nesta aula são:

Segue a apresentação sobre a aula (mirror):

Exercício O02 proposto para a aula .

Especificação aqui.