Programação Web com HTML e CSS
Upcoming SlideShare
Loading in...5
×
 

Programação Web com HTML e CSS

on

  • 2,508 views

Oficina realizada em 2011. Apresenta as linguagens HTML/XHTML/HTML5 e CSS/CSS3. Contém vários exercícios práticos e demos além de referências úteis.

Oficina realizada em 2011. Apresenta as linguagens HTML/XHTML/HTML5 e CSS/CSS3. Contém vários exercícios práticos e demos além de referências úteis.

Statistics

Views

Total Views
2,508
Views on SlideShare
2,508
Embed Views
0

Actions

Likes
1
Downloads
135
Comments
1

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Programação Web com HTML e CSS Programação Web com HTML e CSS Presentation Transcript

  •  Victor Adriel de J. Oliveira  Ciência da Computação – UESC  Associação Empresa Júnior de Computação  Programação Web: [HTML/CSS (tableless), jQuery, PHP, Smarty]  Contato: victorajoliveira@gmail.com
  •  Introdução  W3C  HTML ◦ Introdução ◦ Sintaxe ◦ XHTML ◦ HTML 5  CSS ◦ Sintaxe ◦ Propriedades ◦ Novidades
  •  A função da linguagem de marcação, nesse caso o (X)HTML, é definir a estrutura e a semântica. O CSS foi criado com o objetivo de se separar o conteúdo das informações de estilo.  Nesse curso estudaremos a utilização do HTML e do CSS além das novidades decorrentes do surgimento do HTML 5 e do CSS 3.
  •  O Consórcio World Wide Web (W3C) é uma comunidade internacional que desenvolve padrões com o objetivo de garantir o crescimento da web e é responsável pela definição das especificações do CSS.
  •  Motor de renderização é um software que transforma conteúdo em linguagem de marcação e informações de formatação (como CSS) em um conteúdo formatado para ser exibido na tela.  Gecko – Firefox  WebKit – Chrome e Safari  Trident – Internet Explorer  Presto - Opera
  •  A HTML - HyperText Markup Language (Linguagem de Marcação de Hipertexto) é uma linguagem de marcação usada para a construção de páginas na web.  O HTML é baseado no conceito de Hipertexto. Hipertexto são conjuntos de elementos – ou nós – ligados por conexões. Estes elementos podem ser palavras, imagens, vídeos, áudio, documentos etc.
  •  Todo documento HTML apresenta etiquetas, elementos entre os sinais ‘<‘ e ‘>’. Esses elementos são os comandos de formatação da linguagem. A maioria das etiquetas tem sua correspondente de fechamento: <etiqueta>...</etiqueta>
  •  As etiquetas servem para definir a formatação de uma porção do documento, e assim marcamos onde começa e termina o texto com a formatação especificada por ela. Alguns elementos são chamados “vazios”, pois não marcam uma região de texto, apenas inserem algum elemento no documento: <etiqueta>
  •  Uma etiqueta é formada por comandos, atributos e valores: <img src=“../imgs/imagem.png” /> atributocomando valor
  •  Estrutura básica: <!DOCTYPE HTML> <html> <head> <title>Título do Documento</title> </head> <body> texto, imagem, links, ... </body> </html>
  •  Copie a estrutura básica do HTML em um arquivo de texto e salve com o nome index e a extensão .html  Essa página será utilizada posteriormente.
  • … <body> <h1>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3> <h4>This is heading 4</h4> <h5>This is heading 5</h5> <h6>This is heading 6</h6> </body>
  •  <b> - Define o texto como negrito  <big> - Define o texto como “grande”  <em> - Define o texto como “ênfase”  <i> - Define o texto como itálico  <small> - Define o texto como “pequeno”  <strong>- Define o texto como “forte”  <sub> - Define o texto como subscrito  <sup> - Define o texto como sobrescrito
  • … <body> <p><b>Texto - bold</b></p> <p><strong>Texto - strong</strong></p> <p><big>Texto - big</big></p> <p><i>Texto - italic</i></p> <p><em>Texto - emphasized</em></p> <p><code>Texto - code</code></p> <p>Texto <sub> subscrito</sub> e texto<sup> sobrescrito</sup></p> </body>
  •  <a href="url">texto link</a>  Especificando URLs ◦ URL relativa  background-image: URL(img1.png);  background-image: URL(../arquivo.jpg); ◦ URL absoluta  background-image: URL(http://www.site.com/nw.jpg);
  •  Link para seções  Uma âncora dentro de um documento HTML: ◦ <a name=“topo">Topo da página</a>  Crie um link para o “Topo da página" dentro do mesmo documento: ◦ <a href="#topo">Ir para o topo</a>
  •  <img src="url" alt=“texto sobre a imagem"/>  Coloque uma imagem em sua página HTML
  •  <tr> - Linha  <td> - Coluna  <th> - Coluna/Linha Título  <caption> - Título da tabela  <thead> - Cabeçalho da tabela  <tbody> - Corpo da tabela  <tfoot> - Rodapé da tabela
  • <table border="1"> <tfoot> <tr><td>Soma</td><td>R$160</td></tr> </tfoot> <thead> <tr><th>Mês</th><th>Quantia</th></tr> </thead> <tbody> <tr><td>Janeiro</td><td>R$150</td></tr> <tr><td>Fevereiro</td><td>R$10</td></tr> </tbody> </table>
  •  Rowspan  Colspan
  •  <ol> - Define uma lista ordenada  <ul> - Define uma lista não ordenada  <li> - Define um item de uma tabela  <dl> - Define uma lista de definição  <dt> - Define um item da lista de definição  <dd> - Define a descrição de um item da lista de descrição
  •  Faça a seguinte lista ordenada: <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul>  Depois converta para uma lista não ordenada.
  •  Agora transforme-a em uma lista de descrição: HTML - Linguagem de Marcação CSS - Folhas de Estilo em Cascata JavaScript - Linguagem de script
  •  Não estudaremos o uso de formulários, isso deverá ser estudado em PHP ou Ruby.  Veremos a construção de um formulário simples em HTML e o uso de alguns campos.
  • <form> <label>Nome:</label><br /> <input type="text" name="firstname"/><br /> <label>Password:</label> <br /> <input type="password" name="pwd" /><br /> <label>Sexo:</label> <br /> <input type="radio" name="sex" value="male" /> Masculino<br /> <input type="radio" name="sex" value="female" /> Feminino<br /><br />
  • <label>Gostaria de aprender:</label><br /> <input type="checkbox" name="learn " value="html" /> HTML <br /> <input type="checkbox" name=“learn" value="css" /> CSS <br /><br /> <input type=“reset" value=“Limpar" /> <input type="submit" value=“Enviar" /> </form>
  •  Note que por default é utilizado o método GET para o envio dos dados.  O fluxo de dados é separado do endereço URL através de um ponto de interrogação (?). Esta forma de endereçamento e separação pode ser observada no campo de endereços do navegador após o formulário ter sido enviado. Você verá algo como: (...)index.html?firstname=Furiqueiro&pwd=031286 &sex=male&veiculo=html&veiculo+=css
  • <frameset rows="25%,75%"> <frame src="frame_a.htm" /> <frame src="frame_b.htm" /> <noframe> <body> ... </body> </noframe> </frameset>
  •  framespacing ◦ espaçamento entre frames (em pixel)  frameborder ◦ existência de bordas entre frames (boolean)  src ◦ caminho da página HTML a ser exibida no frame  noresize ◦ impede redimensionamento do frame  scrolling ◦ habilita barra de rolagem (yes ou no)
  •  É uma versão mais rigorosa e limpa do HTML. Praticamente idêntica ao HTML 4.01  O XHTML 1.0 tornou-se uma recomendação da W3C desde 26 de janeiro de 2000.
  • HTML: Exibir elementos XHTML: Descrever elementos  Elementos XHTML devem estar aninhados;  Todos os elementos devem ser fechados;  Devem ser escritos em minúsculo;  E devem conter o elemento raíz.
  •  Os nomes dos atributos devem estar em letras minúsculas  Errado: ◦ <table WIDTH="100%">  Certo: ◦ <table width="100%">
  •  Os valores dos atributos devem estar entre aspas  Errado: ◦ <table WIDTH=100%>  Certo: ◦ <table width="100%">
  •  Abreviação de atributo é proibido  Errado: ◦ <input readonly> ◦ <input disabled>  Certo: ◦ <input readonly="readonly" /> ◦ <input disabled="disabled" />
  •  O DOCTYPE correto para páginas XHTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN“ "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd">
  •  Enquanto o W3C focava suas atenções para a criação da segunda versão do XHTML, um grupo chamado Web Hypertext Application Technology Working Group (WHATWG) trabalhava em uma versão do HTML que trazia mais flexibilidade para a produção de websites e sistemas baseados na web.  O WHATWG inclue a AOL, Apple, Google, IBM, Microsoft, Mozilla, Nokia, Opera.
  • <!DOCTYPE HTML> <html lang="pt-br"> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="estilo.css"> <title></title> </head> <body> ... </body> </html>
  •  <center>, <font>, <big>, <u> e <s> por que seus efeitos são apenas visuais  <frameset>, <frame> e <noframe> por que ferem os princípios de acessibilidade e usabilidade:
  •  Até agora nunca houve um padrão para reprodução de áudio em uma página web. O HTML5 especifica o elemento <audio> <audio src="mus.oga" controls="true" autoplay="true" />
  •  Atualmente, existem três formatos suportados para o elemento de áudio:  Ogg Vorbis, MP3 e WAV.  Compatibilidade com os navegadores:
  •  Origens alternativas de áudio: <audio controls="true" autoplay="true"> <source src="mus.oga" /> <source src="mus.mp3" /> <source src="mus.wma" /> </audio>
  •  Ofereça um conteúdo alternativo: <audio controls="true" autoplay="true"> <source src="mus.oga" /> <source src="mus.mp3" /> <source src="mus.wma" /> <p>Faça o <a href="mus.mp3">download da música</a>.</p> </audio>
  •  O uso de vídeo é semelhante ao de áudio. O HTML5 especifica o elemento <video> <video src="u.ogv" width="400" height="300" />
  •  Atualmente, existem três formatos suportados para o elemento de vídeo:  Ogg e o MPEG 4.  Compatibilidade com os navegadores:
  •  Origens alternativas de vídeo: <video controls="true" autoplay="true" width="400" height="300"> <source src="u.ogv" /> <source src="u.mp4" /> <source src="u.wmv" /> <p>Faça o <a href="u.mp4">download do vídeo</a>.</p> </video>
  •  Novos tipos ◦ tel ◦ search ◦ email ◦ url ◦ number ◦ range
  •  Exemplos: <input name="val" type="number" value="12.4" step="0.2" min="0" max="20" /> <input name="val" type="range" value="12.4" step="0.2" min="0" max="20" />
  •  Exemplos E-mail: <br /> <input type="email“ name="user_email" /> <br /> Homepage: <br /> <input type="url" name="user_url" /> <br />
  • Date: <input type="date" name="user_date" /> <br /> Month: <input type="month" name="user_date" /> <br /> Week: <input type="week" name="user_date" /> <br />
  • Time: <input type="time" name="user_date" /> <br /> Date and time: <input type="datetime" name="user_date" /> <br /> <input type="submit" value="Enviar" />
  •  Placeholder antes: <input name=“srch" value="Search here" onfocus=“if(this.value=='Search here') this.value=‘’”>  Placeholder com HTML5: <input name="srch" placeholder="Search here">
  •  Autofocus: ◦ <input name="login" autofocus >  Required ◦ <input name="login" required>  Pattern ◦ nos permite definir expressões regulares de validação, sem Javascript
  •  Pattern <form> <label for="CEP">CEP: <input name="CEP" id="CEP" required pattern="d{5}-?d{3}" /> </label> <input type="submit" value="Enviar" /> </form>
  •  section  nav  article  aside  hgroup  header  footer  time
  •  subject  itemprop  item  hidden  draggable  Contenteditable ◦ Exemplo: <p>Texto não editável</p> <p contenteditable="true"> Edite-me... </p>
  •  CSS é uma linguagem de estilo utilizada para descrever a apresentação de um documento escrito em uma linguagem de marcação.  A função da linguagem de marcação é definir a estrutura e a semântica. O CSS foi criado com o objetivo de se separar o conteúdo das informações de estilo.
  •  Cascading Style Sheets (Folhas de estilo em cascata)  Existem três métodos para utilização do CSS: Inline ◦ Quando as regras CSS estão declaradas dentro da tag do elemento XHTML. <p style=“color:black; margin: 5px;”> Aqui um parágrafo de cor preta com 5px nas 4 margens. </p>
  • Incorporada ou interna ◦ Quando as regras CSS estão declaradas no próprio documento XHTML, na seção <head> do documento com a tag de estilo <style>. <head> <style type=“text/css”> body { background: black; } </style> </head>
  • Externa Quando as regras CSS estão declaradas em um documento a parte do documento XHTML em um arquivo separado do arquivo html e que tem a extensão .css <head> ... <link rel=“stylesheet” type=“text/css” href=“estilo.css”/> ... </head>
  •  Vantagens da sua utilização: ◦ Facilidade de manutenção; ◦ Novas possibilidades de apresentação visual; ◦ Criação de sites “tableless”; ◦ Diminuição do tempo de download; ◦ Permite o controle em sistemas que não exibem informações em tela;
  •  Usaremos a folha de estilos externa. Crie um arquivo com extensão .CSS e o nome estilo.  A seguir importe a folha de estilos no head da página HTML: <head> ... <link rel=“stylesheet” type=“text/css” href=“estilo.css”/> ... </head>
  •  Herança <html> <head> </head> <body> <!– Todo o parágrafo será sublinhado --> <p style=“font-style:italic;”> Inicio do paragrafo. <br /> <a href=“outrapagina.html”> Link </a> <br /> Fim do paragrafo. </body> </html> Esse link também ficará sublinhado
  •  Rule-Set ◦ É composta por um seletor e um bloco de declaração ELEMENTO { [bloco de declarações] } Ex: p { font-family: Arial; }
  •  Seletores ◦ De tipos de elementos:  A { font-weight: bold; } ◦ De elementos múltiplos:  H1, H2, H3 { font-weight: bold; } ◦ Universal:  * { font-weight: bold; }
  • ◦ De elementos adjacentes:  H1 + p { font-weight: bold; } ◦ De elementos descendentes:  TABLE p { font-weight: bold; } ◦ CLASS  .nomeclass { ... } ◦ ID  #nomeid { ... }
  • ◦ Atributo  A[target] { color: blue; }  img[width=“100”] { color: blue; }  A[title~=“abc”] { color: blue; }  A[title|=“sinf”] { color: blue; }
  •  Crie os seguintes elementos no body da página HTML: <h1>Titulo H1</h1> <h2>Titulo H2</h2> <h3>Titulo H3</h3> <p>Parte do par <span>Span do paragraf</span></p> <p>outro paragrafo</p> <p class="green">outro paragrafo</p> <p id="blue">outro paragrafo</p> <a>Link inativo</a> <a title="teste abc">Link inativo</a> <a title="sinform">Link inativo</a>
  •  Agora teste os seletores: a{color:red;} H2,H3{margin-left:50px;} *{font-style:italic;} H3 + p { font-weight: bold; } p span { font-size:25px; } .green{color:green;} #blue{color:blue;} A[title~="abc"] { text-decoration:underline; } A[title|="sinform"] { text-decoration:blink;}
  •  Pseudoclasses ◦ :link  A:link { color: black; } ◦ :visited  A:visited { color: blue; } ◦ :active  A:active { color: yellow; } ◦ :hover  A:hover { color: red; }
  •  Vamos testar o uso das pseudoclasses  Primeiro crie um elemento link em body: <a href="#">Teste Pseudoclasses</a>
  •  Agora crie o CSS em head: <style type="text/css"> a { font-weight:bold; } a:link { color: black; } a:visited { color: blue; } a:active { background:green ;} a:hover { color: red; } </style>
  •  Unidades de Medida ◦ Unidades de tamanho relativo:  % - relativa ao tamanho-padrão ou ao tamanho herdado de uma medida;  em – relativo ao tamanho da propriedade font-size de um elemento;  px – define o tamanho de um pixel do monitor. Ex: p { font-size: 13px; }
  • ◦ Unidades de tamanho absoluto:  cm – define medidas em centímetros;  in – define medidas em polegadas (2,54 cm);  pt – define medidas em pontos (1/72 polegadas). Ex: table { margin-left: 2cm; }
  •  HTML: <h1>Titulo H1</h1> <h2>Titulo H2</h2> <h3>Titulo H3</h3> <p>Parte do par</p> <span>Span do paragraf</span> <br/> <a>Link</a>
  •  CSS h1 { margin-left:10%; } h2 { margin-left:10em; } h3 { margin-left:10px; } p { margin-left:5cm; } span { margin-left:5in; } a { margin-left:5pt; }
  •  Especificando URLs ◦ URL relativa  background-image: URL(img1.png);  background-image: URL(../arquivo.jpg); ◦ URL absoluta  background-image: URL(http://www.site.com/nw.jpg);
  •  Especificando cores ◦ #RRGGBB – Cada par possui até 256 combinações (entre 00 e FF) Ex: p { color: #FF0000; } ◦ #RGB – Abreviação da notação #RRGGBB Ex: p { color: #F00; } ◦ rgb(R, G, B) – Cada cor varia entre 0 e 255 Ex: p { color: rgb(255, 0, 0); }
  • ◦ VGA name – Utiliza nomes do padrão VGA com 16 cores Ex: p { color: red; }
  •  Font ◦ Seletor { font: [estilo] [variação] [peso] [tamanho]/[altura] [família] } Ex: body { font: bold small-caps 12pt/14pt Arial }
  •  Font ◦ font-family  serif  sans-serif  cursive  fantasy  monospace Ex: body { font-family: “Verdana”, Arial, sans-serif; }
  • ◦ font-size  p { font-size: 12px; } ◦ font-style  p { font-style : italic; } ◦ font-variant  p { font-variant : small-caps; } ◦ font-weight  p { font-weight : bold; }
  •  Text ◦ letter-spacing  p { letter-spacing: 0.4em; } ◦ text-align (left, center, right, justify)  p { text-align : center; } ◦ text-decoration (none, underline, overline, blink)  p { text-decoration : blink; }
  • ◦ word-spacing  p { word-spacing : 0.4em; } ◦ text-transform (capitalize, uppercase, lowercase)  p { text-transform : uppercase; }
  •  Background ◦ Seletor { background: [cor-de-fundo] [imagem-de- fundo] [repetição] [anexo] [posição] } Ex: body { background: #fff url(img.png) repeat-x fixed top right}
  •  Background ◦ background-color  body { background-color: #000; } ◦ background-image  body { background-image : url(figura.jpg); } ◦ background-repeat  body { background-repeat : repeat-x; }
  • ◦ background-attachment  body { background-attachment : fixed; } ◦ background-position  body { background-position : 20% 20%; }
  • Utilizando múltiplas imagens em uma <html> <head> <style type="text/css"> div { height:48px; width:48px; background:url(twitter.png); } div:hover { background-position:100%; } </style> </head> ...
  • … <body> <div></div> </body> </html>
  •  Margin ◦ Seletor { margin: [ valor1[ valor2 [ valor3 [ valor4 ]]]] } Ex: div { margin: 5px 2px 0px 25px; }
  • ◦ margin-top  p { margin-top: 2px; } ◦ margin-right  p { margin-right : 25px; } ◦ margin-bottom  p { margin-bottom : 3cm; } ◦ margin-left  p { margin-left : 1em; }
  •  Padding ◦ Seletor { padding: [ valor1[ valor2 [ valor3 [ valor4 ]]]] } Ex: div { padding : 5px 2px 0px 25px; }
  • ◦ padding-top  p { padding-top: 2px; } ◦ padding-right  p { padding-right : 25px; } ◦ padding-bottom  p { padding-bottom : 3cm; } ◦ padding-left  p { padding-left : 1em; }
  •  Geradores de Conteúdo ◦ Content  A:before { content: “Teste ”;} ◦ Counter-increment  H2:before { counter-increment: cont 5;} ◦ Counter-reset  Body { counter-reset: cont}
  •  HTML: <p>teste</p> <p>teste</p> <p>teste</p> <p>teste</p> <p>teste</p> <p>teste</p> <p>teste</p>
  •  CSS: body{counter-reset: cont;} p:before{ counter-increment:cont; content:counter(cont) " - "; }
  •  HTML <h1>Introdução</h1> <h2>Programação Web com CSS</h2> <h1>HTML</h1> <h2>O que é</h2> <h2>Sintaxe</h2> <h1>W3C</h1> <h2>Qual sua utilidade</h2> <h1>CSS</h1> <h2>Utilidade</h2> <h2>Sintaxe</h2> <h2>Propriedades</h2>
  •  CSS body {counter-reset:secao;} h1 {counter-reset:subsecao;} h1:before { counter-increment:secao; content:"Seção " counter(secao) ". "; } h2:before { counter-increment:subsecao; content:counter(secao) "." counter(subsecao) " "; }
  •  Tableless ◦ Menu vertical ◦ Menu horizontal  Botão  Rollover  Menu Drop-Down  Menu com abas  Hack
  •  1º Passo ◦ Escolha os containers do layout, ou seja, as divs principais que serão criadas; ◦ Não se esqueça que as margens entre um container e outro contam na soma da largura do seu layout.
  •  2º Passo ◦ Nomeie os containers de acordo com suas finalidades. No nosso exemplo adotaremos os seguintes nomes para as DIVs principais do layout:  geral  topo  nav  menu  conteudo  rodape
  •  3º Passo ◦ Crie as DIVs vazias para representar os containers <div id=“geral"> <div id=“topo"></div> <div id=“nav"></div> <div id="menu"></div> <div id="conteudo"></div> <div id=“rodape"></div> </div>
  •  Para facilitar a visualização de como os containers interagem entre si a cada um deles será definida uma largura e uma altura e também uma cor de fundo;  Lembre-se que é importante que você teste em diversos navegadores cada vez que termine uma etapa;  Vamos definir a altura de todas as DIVs apenas para efeito de visualização.
  •  A primeira regra CSS a criar é referente ao body, pois ele é o pai de todas as DIVs: ◦ Primeiro precisamos zerar as propriedades margin e padding, pois cada navegador tem uma forma de renderização; ◦ Definimos a propriedade text-aling para centralizar nosso layout. A propriedade não irá centralizar o texto, mas sim a DIV geral; ◦ Definimos font e cor padrão; ◦ E neste exemplo definimos uma cor de fundo para visualizar melhor.
  •  Nossa regra CSS para o body: body{ margin: 0; padding: 0; font: 12px arial, helvetica, sans-serif; text-align: center; color: #505367; background-color: #D6D6D6; }
  •  A próxima DIV a ser posicionada é a DIV geral, pois ela contém as demais DIVs: ◦ Deve-se estabelecer a largura máxima do seu layout; ◦ Se seu site dor dinâmica defina a altura como automática, assim evitando que o conteúdo ultrapasse os limites do layout.
  •  Nossa regra CSS para geral: #geral{ margin: 10px auto; width: 650px; height: auto; text-align: left; background-color: red; border: 1px solid black; }
  •  6º Passo ◦ Para posicionar o topo, definimos apenas a altura e a largura: #topo{ height: 45px; background-color: fuchsia; }
  •  7º Passo ◦ Posicionando o menu de navegação horizontal, definimos uma altura máxima para tal: #nav{ height: 25px; background-color: green; }
  •  8º Passo ◦ O alinhamento do menu vertical será feito pela direita e não inline como as outras divs. Além de definir altura e largura da mesma: #menu{ float: right; width: 180px; height: 100px; background-color: yellow; }
  •  9º Passo ◦ Para posicionar o conteúdo é preciso definir as margens direita e esquerda. A margem direita deve ser maior do que o menu da direita, pois a DIVconteudo não poderá ultrapassá-lo: #conteudo{ margin-right: 200px; margin-left: 20px; height: 200px; background-color: aqua; }
  •  10º Passo ◦ Para o rodapé utilizaremos a propriedade clear:both para equalizar qualquer elemento anteriomente flutuado. Ou seja, ele limpa a flutuação das divs anteriores para não interferir no posicionamento do rodapé: #rodape{ clear: both; height: 20px; background-color: lime; }
  • ◦ Ficará assim:
  •  Terminada a etapa de posicionamento, removeremos a altura definida para as DIVs e deixaremos como auto (height:auto;).  A seguir vamos inserir algum texto dentro dos containers.
  •  Inserindo conteúdo no topo: <div id=“topo“> <h1>Nome do site</h1> </div>  Inserindo conteúdo em nav: <div id=“nav"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Serviços</a></li> <li><a href="#">Produtos</a></li> <li><a href="#">Contato</a></li> </ul> </div>
  •  Inserindo conteúdo em menu: <div id="menu"> <h3>Serviços</h3> <ul> <li><a href="#">Websites</a></li> <li><a href="#">Internet</a></li> <li><a href="#">Intranet</a></li> <li><a href="#">Extranet</a></li> </ul> </div>
  •  Inserindo conteúdo na DIV conteudo: <div id=“conteudo”> <h2>Cabeçalho</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euis mod tincidunt ut laoreet dolore magna al. </p> <p> Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo. </p> </div>
  •  Inserindo conteúdo na DIV rodape: <div id=“rodape"> <p>Copyright © SINFORM 2010</p> </div>
  •  Estilizando body e elementos em geral: h2 { color: #B52C07; font: 120% georgia, times, "times new roman", serif; font-weight: bold; } p { color: #5B5E0E; font: 106% georgia, times, "times new roman", serif; }
  •  Estilizando o topo: #topo{ height: 45px; margin-top:-15px; background-image: url(topo.jpg); background-repeat: no-repeat; border-bottom: 1px solid #fff; position: relative; color:#fff; }
  •  Estilizando o nav (menu horizontal): #nav{ background-color: #9FA41D; color: #272900; padding: 2px 0; margin-bottom: 22px; } #nav li{ display: inline; padding: 0 10px; border-right: 1px solid #C4C769; }
  • #nav li a{ text-decoration: none; color: #272900; } #nav li a:hover{ text-decoration: none; color: #fff; }
  •  Estilizando o menu (direita): #menu{ float: right; width: 165px; border-left: 1px solid #C5C877; padding-left: 15px; } #menu ul{ margin-right: 10px; padding-left: 0; list-style-type: none; line-height: 165%; }
  •  Estilizando o rodape: #rodape{ clear: both; color: #272900; border-top: 1px dashed #9FA41D; text-align: center; font-size: 10px; }
  •  O efeito de botão é dado ao menu usando as bordas outset e inset: #menu li { border:3px outset #060; margin-bottom:2px; } #menu li:active { border:3px inset #060; }
  •  Ao passar o cursor sobre o menu o background é alterado. #menu a{ display:block; } #menu li a:hover { background-color:#006600; color:#fff; }
  •  Criaremos a estrutura do menu através de uma lista não ordenada, com cada um dos sub-menus constituídos por outra lista não ordenada dentro da primeira
  • <div id="menu"> <ul> <li><a href="#">Section 1</a></li> <li><a href="#">Section 2</a></li> <li><a href="#">Section 3</a> <ul> <li><a href="#">Section 1</a></li> <li><a href="#">Section 2</a></li> </ul> </li> <li><a href="#">Section 4</a></li> </ul> </div>
  •  Estilo: #nav li ul { position: absolute; left: 0px; top: 15px; background-color: #9FA41D; display: none; } #nav li ul li a { margin-left:-40px; display:block; }
  • #nav ul li { position: relative; display: inline; margin:5px; padding: 0px 2px 0px 2px; border-right:none; } #nav li:hover ul { display:block; }
  •  Nosso menu ficará assim:  Para isso precisaremos de quatro imagens...
  •  Duas para a aba em seu estado normal:  E duas para a aba corrente:
  • Mas, porque usaremos duas imagens para cada estado da aba? O fato é que se aba expandir as imagens deslizam para os lados preenchendo o novo vão maior com mais trecho da imagem direita:
  • Vamos chamar nossa div de “header”: <div id="header"> <ul> <li><a href="#">Home</a></li> <li id="current"><a href="#">News</a></li> <li><a href="#">Products</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </div>
  •  Estilo: #header { float:left; width:100%; font-size:93%; background:url(Nova%20pasta/bg.gif) repeat-x bottom; }
  • #header ul { margin:0; padding:0; list-style:none; padding:10px 10px 0; } #header li { float:left; background:url(Nova%20pasta/norm_left.png) no-repeat left top; margin:0; padding:0 0 0 9px; }
  • #header a { display:block; background:url(Nova%20pasta/norm_right.png) no-repeat right top; padding:5px 15px 4px 6px; } #header #current { background-image: url(Nova%20pasta/norm_left_on.png); }
  • #header #current a { background-image: url(Nova%20pasta/norm_right_on.png); padding-bottom:5px; }
  •  Também conhecido como comentário condicional, a estrutura básica é a mesma dos comentários HTML: <!-- -->  Assim, todos os demais navegadores interpretarão como um comentário normal e serão ignorados.
  •  O Internet Explorer, foi projetado para reconhecer a sintaxe especial <!--[if IE]>  Ele processa o if e interpreta o conteúdo do comentário condicional como se fosse um conteúdo normal da página.
  • <!--[if IE]> De acordo com o comentário condicional este é o Internet Explorer<br> <![endif]--> <!--[if IE 5]> De acordo com o comentário condicional este é o Explorer 5<br> <![endif]--> <!--[if IE 5.0]> De acordo com o comentário condicional este é o Internet Explorer 5.0<br> <![endif]-->
  • <!--[if IE 5.5]> De acordo com o comentário condicional este é o Internet Explorer 5.5<br> <![endif]--> <!--[if gte IE 5]> De acordo com o comentário condicional este é o Internet Explorer 5 ou maior<br> <![endif]--> <!--[if lt IE 6]> De acordo com o comentário condicional este é o Internet Explorer versão menor que 6<br> <![endif]-->
  •  Especificado pela W3C (CSS3) ◦ box-shadow:1px 1px 5px #000;  Implementado pelo Webkit ◦ -webkit-box-shadow:1px 1px 5px #000;  Implementado pelo Mozilla ◦ -moz-box-shadow:1px 1px 5px #000;
  •  Especificado pela W3C (CSS3) ◦ border-top-right-radius: 8px; ◦ border-top-left-radius: 8px; ◦ border-bottom-right-radius: 8px; ◦ border-bottom-left-radius: 8px;  Implementado pelo Webkit ◦ -webkit-border-top-right-radius: 8px; ◦ -webkit-border-top-left-radius: 8px; ◦ -webkit-border-bottom-left-radius: 8px; ◦ -webkit-border-bottom-right-radius: 8px;  Implementado pelo Mozilla ◦ -moz-border-radius: 8px 8px 8px 8px;
  • PRONTO, PODE CONTINUAR SOZINHO... http://www.maujor.com Fique atento às novidades, testem os exemplos dados nos sites que falam sobre o tema, leiam sobre o assunto e pratiquem, testem combinações de cores... O que faz a diferença no final é a criatividade somada ao conhecimento técnico.
  • Victor Adriel de J. Oliveira victorajoliveira@gmail.com http://blogvictoradriel.blogspot.com.br/ apresentação feita em 2010