Your SlideShare is downloading. ×
  • Like
Programação Web com HTML e CSS
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Programação Web com HTML e CSS

  • 2,957 views
Published

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.

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
2,957
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
187
Comments
2
Likes
3

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1.  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
  • 2.  Introdução  W3C  HTML ◦ Introdução ◦ Sintaxe ◦ XHTML ◦ HTML 5  CSS ◦ Sintaxe ◦ Propriedades ◦ Novidades
  • 3.  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.
  • 4.  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.
  • 5.  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
  • 6.  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.
  • 7.  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>
  • 8.  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>
  • 9.  Uma etiqueta é formada por comandos, atributos e valores: <img src=“../imgs/imagem.png” /> atributocomando valor
  • 10.  Estrutura básica: <!DOCTYPE HTML> <html> <head> <title>Título do Documento</title> </head> <body> texto, imagem, links, ... </body> </html>
  • 11.  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.
  • 12. … <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>
  • 13.  <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
  • 14. … <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>
  • 15.  <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);
  • 16.  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>
  • 17.  <img src="url" alt=“texto sobre a imagem"/>  Coloque uma imagem em sua página HTML
  • 18.  <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
  • 19. <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>
  • 20.  Rowspan  Colspan
  • 21.  <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
  • 22.  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.
  • 23.  Agora transforme-a em uma lista de descrição: HTML - Linguagem de Marcação CSS - Folhas de Estilo em Cascata JavaScript - Linguagem de script
  • 24.  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.
  • 25. <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 />
  • 26. <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>
  • 27.  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
  • 28. <frameset rows="25%,75%"> <frame src="frame_a.htm" /> <frame src="frame_b.htm" /> <noframe> <body> ... </body> </noframe> </frameset>
  • 29.  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)
  • 30.  É 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.
  • 31. 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.
  • 32.  Os nomes dos atributos devem estar em letras minúsculas  Errado: ◦ <table WIDTH="100%">  Certo: ◦ <table width="100%">
  • 33.  Os valores dos atributos devem estar entre aspas  Errado: ◦ <table WIDTH=100%>  Certo: ◦ <table width="100%">
  • 34.  Abreviação de atributo é proibido  Errado: ◦ <input readonly> ◦ <input disabled>  Certo: ◦ <input readonly="readonly" /> ◦ <input disabled="disabled" />
  • 35.  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">
  • 36.  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.
  • 37. <!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>
  • 38.  <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:
  • 39.  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" />
  • 40.  Atualmente, existem três formatos suportados para o elemento de áudio:  Ogg Vorbis, MP3 e WAV.  Compatibilidade com os navegadores:
  • 41.  Origens alternativas de áudio: <audio controls="true" autoplay="true"> <source src="mus.oga" /> <source src="mus.mp3" /> <source src="mus.wma" /> </audio>
  • 42.  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>
  • 43.  O uso de vídeo é semelhante ao de áudio. O HTML5 especifica o elemento <video> <video src="u.ogv" width="400" height="300" />
  • 44.  Atualmente, existem três formatos suportados para o elemento de vídeo:  Ogg e o MPEG 4.  Compatibilidade com os navegadores:
  • 45.  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>
  • 46.  Novos tipos ◦ tel ◦ search ◦ email ◦ url ◦ number ◦ range
  • 47.  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" />
  • 48.  Exemplos E-mail: <br /> <input type="email“ name="user_email" /> <br /> Homepage: <br /> <input type="url" name="user_url" /> <br />
  • 49. Date: <input type="date" name="user_date" /> <br /> Month: <input type="month" name="user_date" /> <br /> Week: <input type="week" name="user_date" /> <br />
  • 50. Time: <input type="time" name="user_date" /> <br /> Date and time: <input type="datetime" name="user_date" /> <br /> <input type="submit" value="Enviar" />
  • 51.  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">
  • 52.  Autofocus: ◦ <input name="login" autofocus >  Required ◦ <input name="login" required>  Pattern ◦ nos permite definir expressões regulares de validação, sem Javascript
  • 53.  Pattern <form> <label for="CEP">CEP: <input name="CEP" id="CEP" required pattern="d{5}-?d{3}" /> </label> <input type="submit" value="Enviar" /> </form>
  • 54.  section  nav  article  aside  hgroup  header  footer  time
  • 55.  subject  itemprop  item  hidden  draggable  Contenteditable ◦ Exemplo: <p>Texto não editável</p> <p contenteditable="true"> Edite-me... </p>
  • 56.  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.
  • 57.  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>
  • 58. 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>
  • 59. 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>
  • 60.  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;
  • 61.  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>
  • 62.  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
  • 63.  Rule-Set ◦ É composta por um seletor e um bloco de declaração ELEMENTO { [bloco de declarações] } Ex: p { font-family: Arial; }
  • 64.  Seletores ◦ De tipos de elementos:  A { font-weight: bold; } ◦ De elementos múltiplos:  H1, H2, H3 { font-weight: bold; } ◦ Universal:  * { font-weight: bold; }
  • 65. ◦ De elementos adjacentes:  H1 + p { font-weight: bold; } ◦ De elementos descendentes:  TABLE p { font-weight: bold; } ◦ CLASS  .nomeclass { ... } ◦ ID  #nomeid { ... }
  • 66. ◦ Atributo  A[target] { color: blue; }  img[width=“100”] { color: blue; }  A[title~=“abc”] { color: blue; }  A[title|=“sinf”] { color: blue; }
  • 67.  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>
  • 68.  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;}
  • 69.  Pseudoclasses ◦ :link  A:link { color: black; } ◦ :visited  A:visited { color: blue; } ◦ :active  A:active { color: yellow; } ◦ :hover  A:hover { color: red; }
  • 70.  Vamos testar o uso das pseudoclasses  Primeiro crie um elemento link em body: <a href="#">Teste Pseudoclasses</a>
  • 71.  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>
  • 72.  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; }
  • 73. ◦ 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; }
  • 74.  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>
  • 75.  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; }
  • 76.  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);
  • 77.  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); }
  • 78. ◦ VGA name – Utiliza nomes do padrão VGA com 16 cores Ex: p { color: red; }
  • 79.  Font ◦ Seletor { font: [estilo] [variação] [peso] [tamanho]/[altura] [família] } Ex: body { font: bold small-caps 12pt/14pt Arial }
  • 80.  Font ◦ font-family  serif  sans-serif  cursive  fantasy  monospace Ex: body { font-family: “Verdana”, Arial, sans-serif; }
  • 81. ◦ 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; }
  • 82.  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; }
  • 83. ◦ word-spacing  p { word-spacing : 0.4em; } ◦ text-transform (capitalize, uppercase, lowercase)  p { text-transform : uppercase; }
  • 84.  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}
  • 85.  Background ◦ background-color  body { background-color: #000; } ◦ background-image  body { background-image : url(figura.jpg); } ◦ background-repeat  body { background-repeat : repeat-x; }
  • 86. ◦ background-attachment  body { background-attachment : fixed; } ◦ background-position  body { background-position : 20% 20%; }
  • 87. 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> ...
  • 88. … <body> <div></div> </body> </html>
  • 89.  Margin ◦ Seletor { margin: [ valor1[ valor2 [ valor3 [ valor4 ]]]] } Ex: div { margin: 5px 2px 0px 25px; }
  • 90. ◦ margin-top  p { margin-top: 2px; } ◦ margin-right  p { margin-right : 25px; } ◦ margin-bottom  p { margin-bottom : 3cm; } ◦ margin-left  p { margin-left : 1em; }
  • 91.  Padding ◦ Seletor { padding: [ valor1[ valor2 [ valor3 [ valor4 ]]]] } Ex: div { padding : 5px 2px 0px 25px; }
  • 92. ◦ padding-top  p { padding-top: 2px; } ◦ padding-right  p { padding-right : 25px; } ◦ padding-bottom  p { padding-bottom : 3cm; } ◦ padding-left  p { padding-left : 1em; }
  • 93.  Geradores de Conteúdo ◦ Content  A:before { content: “Teste ”;} ◦ Counter-increment  H2:before { counter-increment: cont 5;} ◦ Counter-reset  Body { counter-reset: cont}
  • 94.  HTML: <p>teste</p> <p>teste</p> <p>teste</p> <p>teste</p> <p>teste</p> <p>teste</p> <p>teste</p>
  • 95.  CSS: body{counter-reset: cont;} p:before{ counter-increment:cont; content:counter(cont) " - "; }
  • 96.  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>
  • 97.  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) " "; }
  • 98.  Tableless ◦ Menu vertical ◦ Menu horizontal  Botão  Rollover  Menu Drop-Down  Menu com abas  Hack
  • 99.  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.
  • 100.  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
  • 101.  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>
  • 102.  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.
  • 103.  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.
  • 104.  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; }
  • 105.  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.
  • 106.  Nossa regra CSS para geral: #geral{ margin: 10px auto; width: 650px; height: auto; text-align: left; background-color: red; border: 1px solid black; }
  • 107.  6º Passo ◦ Para posicionar o topo, definimos apenas a altura e a largura: #topo{ height: 45px; background-color: fuchsia; }
  • 108.  7º Passo ◦ Posicionando o menu de navegação horizontal, definimos uma altura máxima para tal: #nav{ height: 25px; background-color: green; }
  • 109.  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; }
  • 110.  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; }
  • 111.  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; }
  • 112. ◦ Ficará assim:
  • 113.  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.
  • 114.  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>
  • 115.  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>
  • 116.  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>
  • 117.  Inserindo conteúdo na DIV rodape: <div id=“rodape"> <p>Copyright © SINFORM 2010</p> </div>
  • 118.  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; }
  • 119.  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; }
  • 120.  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; }
  • 121. #nav li a{ text-decoration: none; color: #272900; } #nav li a:hover{ text-decoration: none; color: #fff; }
  • 122.  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%; }
  • 123.  Estilizando o rodape: #rodape{ clear: both; color: #272900; border-top: 1px dashed #9FA41D; text-align: center; font-size: 10px; }
  • 124.  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; }
  • 125.  Ao passar o cursor sobre o menu o background é alterado. #menu a{ display:block; } #menu li a:hover { background-color:#006600; color:#fff; }
  • 126.  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
  • 127. <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>
  • 128.  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; }
  • 129. #nav ul li { position: relative; display: inline; margin:5px; padding: 0px 2px 0px 2px; border-right:none; } #nav li:hover ul { display:block; }
  • 130.  Nosso menu ficará assim:  Para isso precisaremos de quatro imagens...
  • 131.  Duas para a aba em seu estado normal:  E duas para a aba corrente:
  • 132. 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:
  • 133. 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>
  • 134.  Estilo: #header { float:left; width:100%; font-size:93%; background:url(Nova%20pasta/bg.gif) repeat-x bottom; }
  • 135. #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; }
  • 136. #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); }
  • 137. #header #current a { background-image: url(Nova%20pasta/norm_right_on.png); padding-bottom:5px; }
  • 138.  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.
  • 139.  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.
  • 140. <!--[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]-->
  • 141. <!--[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]-->
  • 142.  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;
  • 143.  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;
  • 144. 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.
  • 145. Victor Adriel de J. Oliveira victorajoliveira@gmail.com http://blogvictoradriel.blogspot.com.br/ apresentação feita em 2010