Aula 7 LISTAS E TABELAS. Curso: Técnico em Informática Disciplina: Desenvolvimento Web Professora: Luciana Balieiro Cosme

Transcrição

1 Aula 7 LISTAS E TABELAS Curso: Técnico em Informática Disciplina: Desenvolvimento Web Professora: Luciana Balieiro Cosme

2 Listas Prover mecanismos para listar informações Devem conter um ou mais itens Elementos importantes para criação de menus Ordenadas, não-ordenadas e definições

3 Exemplo: listas não-ordenadas <h1> Tipos de Listas </h1> <ul> <li>não-ordenadas. </li> <li>ordenadas. </li> <li>definições. </li> </ul>

4 Listas ordenadas Quando a ordenação é importante <h1>receita de bolo</h1> <ol> <li>bata o açúcar, a margarina e os ovos</li> <li>depois acrescente a farinha de trigo, o leite e o fermento</li> <li>unte a forma</li> <li>coloque a massa na forma asse por mais ou menos 40 minutos</li> </ol>

5 Listas de definição Termo/Definição <h1>bebidas</h1> <dl> <dt>café</dt> <dd>bebida quente preta</dd> <dt>leite</dt> <dd>bebida fria branca</dd> </dl>

6 Listas mistas <h1> Tipos de Listas </h1> <h2> Simples</h2> <ul> <li>não ordenadas </li> <li>ordenadas</li> <li>definições</li> </ul> <h2> Aninhada</h2> <ul> <li>não ordenadas <ul> <li>simples</li> <li>mistas</li> </ul> </li> <li>ordenadas. </li> <li>definições. </li> </ul>

7 Listas mistas

8 Estilização Adequado para criação de uma lista de links (menu) Não é possível estilizar o marcador separadamente do texto Exemplo <ul> <li><span>não ordenadas </span></li> </ul> --- ul {color: red;} li span{color: blue;}

9 Propriedades list-style-type: aparência do marcador Glifos: disc, circle, square Numéricos: Decimal (começando de 1) decimal-leading-zero (zero inicial) Lower-roman (algarismos romanos minúsculos) Upper-roman (algarismos romanos maiúsculos) Georgian Armenian Alfabéticos Lower-alpha Upper-alpha Lower-greek

10 Exemplo <h2> Quadrados</h2> <ul> <li>item 1</li> <li>item 2</li> </ul> <h2> Decimal</h2> <ol class="decimal"> <li>item 1</li> <li>item 2</li> </ol> <h2>decimal</h2> <ol class="zero"> <li>item 1</li> <li>item 2</li> </ol> <h2>alg. romanos</h2> <ol class="roman"> <li>item 1</li> <li>item 2</li> </ol> <h2>alg. georgeanos</h2> <ol class="georgian"> <li>item 1</li> <li>item 2</li> </ol>

11 Cont. Exemplo <h2>letras</h2> <ol class="letras"> <li>item 1</li> <li>item 2</li> </ol> <h2>letras gregas</h2> <ol class="gregas"> <li>item 1</li> <li>item 2</li> </ol>

12 CSS h2{font-weight: bold;font-size:14px;} ul {list-style-type:square; } ol.decimal {list-style-type: decimal;} ol.zero {list-style-type: decimal-leadingzero;} ol.roman {list-style-type: upper-roman;} ol.georgian {list-style-type: georgian;} ol.letras {list-style-type: lower-alpha;} ol.gregas {list-style-type: lower-greek;}

13 Propriedades Retirando os marcadores list-style-type: none; Imagem list-style-image: url( seta.png );

14 Menu <ul id="nav"> <li> <a href="index.html">página Inicial</a> </li> <li><a href="produtos.html">produtos</a> </li> <li><a href="contato.html"> Contato</a></li> </ul>

15 Menu: CSS #nav, #nav *{margin:0; padding:0;} #nav{ list-style-type: none; width: 10em; } #nav li a { text-decoration: none; border: 2px solid silver; margin-bottom: 2px; display: block; color: black; }

16 Rollover simples #nav, #nav * {margin:0; padding:0;} #nav{ list-style-type: none; width: 10em; font: bold.8em Verdana,Arial, sans-serif; background: #ccc; padding: 0 1px 1px; } #nav li { border-top: 1px solid #ccc; }

17 Continuação #nav li a { display: block; text-decoration: none; color: #fff; padding: 0.25em 0.5em 0.25em 0.75em; border-left: 1em solid #069; background: #09c; } #nav li a:hover{ color: #2eacd5; background: #ffffff; border-left: 1em solid #a2c7da; }

18 Menu horizontal #nav, #nav *{margin:0; padding:0;} #nav{ list-style-type: none; width: 100%; font: bold.8em Verdana,Arial, sans-serif; background: #daecff; } #nav li {float:left;} #nav li a:hover{ color: #2eacd5; background: #daecff; border-left: 1em solid #a2c7da;}

19 Menu horizontal #nav li a { display: block; text-decoration: none; color: #daecff; padding: 0.25em 0.5em 0.25em 0.75em; border-left: 1em solid #069; background: #09c; margin-right:2px; }

20 Tabelas Dados tabulares Espécie de grade, composta de colunas, linhas e células

21 Exemplo Exemplo: <table border= 1 > <tr> </tr> <tr> </tr> </table> <td> Destino </td> <td> Saída </td> <td> Belo Horizonte </td> <td>06:30 </td>

22 Elementos th, caption, summary th: cabeçalho caption: título summary: sumário descritivo da tabela

23 Exemplo <body> <table border="1" summary="tabelas de horários dos vôos partindo de Montes Claros"> <caption>vôos com partida de Montes Claros/MG</caption> <tr> </tr> <th> Destino </th> <th> Saída </th> <th>companhia</th> <tr> <td> Belo Horizonte </td> <td>06:30 </td> <td>gol</td> </tr> <tr> <td> Belo Horizonte </td> <td>07:00</td> <td>azul</td> </tr> </table>

24 Exemplo

25 Elementos thead, tfoot, tbody thead: seções contendo o cabeçalhos da tabela tfoot: seção contendo o rodapé tbody: seção para o corpo da tabela

26 Colspan, rowspan colspan: define o número de colunas que a célula deve ocupar rowspan: define o número de linhas que a célula deve ocupar

27 Exemplo <table border="1"> <caption>vôos com partida de Montes Claros</caption> <thead> <tr> </tr> <th> Destino </th> <th> Saída </th> <th>companhia</th> </thead>

28 Exemplo <tfoot> <tr> <td colspan="3">frequência Diária</td> </tr></tfoot>

29 Exemplo <tbody> <tr> <td> Belo Horizonte </td> <td>06:30 </td> <td rowspan="2">companhia 1</td> </tr> <tr> <td> Belo Horizonte </td> <td>07:00 </td> </tr> <tr> <td> Belo Horizonte </td> <td>08:00</td> <td>companhia 2</td> </tr> </tbody> </table>

30 Tabelas Celspacing <table cellspacing="0" border="1"> Bordas table td { border: 1px solid silver; }

31 Bordas table td { border: 1px solid silver; padding: 10px; } table th{ border: 1px solid silver; background: #999; tfoot { text-align: center; background: #eee; padding: 0px; } table caption { font-size: 14px; margin-bottom:10px; } }

32 Alguns estilos de tabela Alternando cor de linha <tr class="dif"> table tr.dif{ background: #FFFFCC; }

33 Exercícios Em sala

34 Leitura Complementar Capítulo 9 e 11 - SILVA, M. S. Construindo Sites com CSS e (X)HTML. Novatec, 2007

35 Referências SILVA, M. S. Construindo Sites com CSS e (X)HTML. Novatec,

36 Contato