WEBDESIGN Professor: Paulo Marcos Trentin - paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira
Recursos avançados com CSS Uma vez entendido o uso básico e treinado muito, chegou a hora de estudarmos recursos avançados, como: Uso da ferramenta Inspecionar elemento Layouts; Menus; Pseudo-elementos; 10/6/2011 2
Ferramenta Inspecionar Elemento Vem por padrão no Google Chrome; Pode ser instalada no firefox, através do addon: Firebug; Mais ferramentas de desenvolvimento Web podem ser vistas aqui (futuramente estudaremos algumas a mais): http://hajaluz.webluz.net/osseis-melhores-complementos-do-firefox-paradesenvolvimento-web/. 10/6/2011 3
Ferramenta Inspecionar Elemento Quando usar? Em muitas situações nos deparamos com erros que não podemos entender à primeira vista. Com a inspeção de elementos tudo fica mais fácil. Por exemplo: Uma imagem não carrega, mas você acredita ter feito tudo certo. Então inspecionando o elemento HTML img, você poderá saber o que está acontecendo. 10/6/2011 4
Ferramenta Inspecionar Elemento Como ativar? Basta clicar com o botão direito do mouse sobre o item que deseja inspecionar (site usado: http://netbeans.org/downloads/index.html): 10/6/2011 5
Ferramenta Inspecionar Elemento Como ativar? Aparecerá então, uma área na parte inferior do navegador, mostrando todos os elementos HTML do site, e sublinhado, aquele que você está inspecionando, como mostrado abaixo: 10/6/2011 6
Ferramenta Inspecionar Elemento Como ativar? Reparou o elemento img e seus atributos? Que erro encontramos aqui? 10/6/2011 7
Ferramenta Inspecionar Elemento Entendendo Repare que ao passar o mouse sobre o elemento desejado, este fica marcado, exibindo também seu nome (img) e tamanho (92x25): 10/6/2011 8
Ferramenta Inspecionar Elemento Entendendo Crie a seguinte estrutura em um novo arquivo HTML: 10/6/2011 9
Ferramenta Inspecionar Elemento Entendendo Abra o navegador e repare que nada pode ser visto, então inspecione o elemento e vá com o mouse sobre nossa div: 10/6/2011 10
Ferramenta Inspecionar Elemento Entendendo Repare que em azul fraco temos o real tamanho da DIV que criamos (400 x 200 píxeis). 10/6/2011 11
Ferramenta Inspecionar Elemento Entendendo E em azul escuro temos o margin-right criado automaticamente pelo navegador, afinal a div é um elemento de bloco que usa sempre a largura máxima disponível. 10/6/2011 12
Ferramenta Inspecionar Elemento Entendendo Por último, repare o quadro à direita inferior. Ele possui todas as propriedades CSS carregadas para o elemento selecionado. 10/6/2011 13
Ferramenta Inspecionar Elemento Padding Modifique seu HTML como segue abaixo: 10/6/2011 14
Ferramenta Inspecionar Elemento Padding Agora repare o tamanho da div, padding-left e padding-top (azul intermediário) tamanho da margin-right (azul escuro) e o local para conteúdo (azul mais claro): 10/6/2011 15
Ferramenta Inspecionar Elemento Padding Repare também que a altura (height) de nossa div centro aumentou para 240px, por que? 10/6/2011 16
Ferramenta Inspecionar Elemento Resumo Percebemos então, que o inspetor de elementos é uma ferramenta extremamente útil, e nos ajudará muito para detectarmos possíveis falhas em nosso código; Sempre que algo está errado, mas você jura que fez certo, use o inspetor de elementos; Vimos o básico do básico sobre o inspetor de elementos, você pode e deve estudar mais, fazendo testes e vendo o que cada função dele é capaz. 10/6/2011 17
Desenvolvendo um layout completo com CSS Parte 1 A proposta aqui presente é de desenvolver um layout simples, porém completo apenas com elementos de bloco HTML e CSS; Ele conterá um cabeçalho, menu de navegação global, menu de navegação local, conteúdo central e rodapé; Um layout que é feito sem o uso de tabelas é conhecido como tableless; Na próxima página temos o esboço inicial deste layout. 10/6/2011 18
10/6/2011 19
Desenvolvendo um layout completo com CSS Parte 1 - Elementos Temos 5 elementos neste layout, potencialmente 4 div e 1 ul; wrapper é o nosso invólucro, ele é útil se desejarmos centralizar o site; Os outros elementos são auto-explicativos, sendo header o cabeçalho, menu_local o menu de navegação local, content a àrea de conteúdo, e footer o rodapé. 10/6/2011 20
Desenvolvendo um layout completo com CSS Parte 2 Código HTML 10/6/2011 21
Desenvolvendo um layout completo com CSS Parte 3 Código CSS 10/6/2011 22
Desenvolvendo um layout completo com CSS Parte 4 Resultado 10/6/2011 23
Desenvolvendo um layout completo com CSS Parte 5 Entendendo o CSS As propriedades de altura de largura não são nenhuma novidade para nós; Vamos começar com o elemento wrapper: border: 1px solid black -> Indica respectivamente o tamanho, tipo e cor da borda deste bloco; margin: auto -> Indica que as margens deste elemento serão automáticas. Isso garante que ele permaneça sempre centralizado, pois o navegador cria bordas iguais em ambos os lados do elemento. 10/6/2011 24
Desenvolvendo um layout completo com CSS Parte 5 Entendendo o CSS Por que não definimos altura para o elemento wrapper? Ao deixar de colocar altura em um elemento, o navegador assume a propriedade height: auto; que define automaticamente a altura. Os elementos internos ao wrapper, irão expandí-lo automaticamente, fazendo com que mude de tamanho de acordo com a necessidade. 10/6/2011 25
Desenvolvendo um layout completo com CSS Parte 5 Entendendo o CSS propriedade float Continuando, temos nosso cabeçalho (header) que não possui nenhuma novidade; Vamos continuar com o elemento menu_local: float: left -> Indica que este elemento irá flutuar à esquerda; Flutuando, o elemento permite que coloquemos outro na mesma linha que ele; Veja na página a seguir o que aconteceria ser removêssemos esta 10/6/2011 propriedade. 26
10/6/2011 27
Desenvolvendo um layout completo com CSS Parte 5 Entendendo o CSS O próximo elemento é o content. Vemos que ele flutua a direita. Isso foi intencional para que víssemos os dois usos tradicionais da propriedade float: Repare que é nele que criamos a margin entre o rodapé e ele. Se colocássemos margin-top: 10px; no elemento footer não funcionaria, depois entenderemos o porquê. 10/6/2011 28
Desenvolvendo um layout completo com CSS Parte 5 Entendendo o CSS Por último temos o footer. A única propriedade nova aqui é o clear. Esta propriedade pode ser lida como transpor. Transpor à direita, significa que ele irá ficar abaixo do maior elemento à direita, neste caso, o content; Faça um teste e mude a propriedade clear para esquerda e veja o que acontece; Veja na tela seguinte o que ocorre se 10/6/2011 removermos a propriedade clear. 29
Desenvolvendo um layout completo com CSS Parte 5 Entendendo o CSS Propriedade clear 10/6/2011 30
Desenvolvendo um layout completo com CSS Parte 5 Entendendo o CSS Propriedade clear A imagem anterior demonstrou bem o funcionamento da propriedade clear; Precisamos sempre cuidar ao trabalhar com elementos flutuantes para não sermos pegos de surpresa se o elemento posterior não ficar no lugar certo; No nosso caso, após usar a propriedade clear, o elemento footer estará muito longe do header, portanto se colocarmos margin-top: 10px no footer, isso não surtirá efeito. Faça seus testes! 10/6/2011 31
Desenvolvendo um layout completo com CSS Parte 6 Toques finais com o cabeçalho É importante que o cabeçalho já comporte nosso menu para podermos criá-lo posteriormente; Insira o seguinte código HTML dentro de seu header: 10/6/2011 32
Desenvolvendo um layout completo com CSS Parte 6 Toques finais com o cabeçalho - Estrutura 10/6/2011 33
Criando um Menu com CSS Um menu nada mais é que uma coleção de itens com hyperlinks, dispostos de forma igual com algum efeito para gerar uma interação básica com o usuário; Itens são elementos de lista (li); Hyperlinks são elementos HTML que já usamos (a); 10/6/2011 34
Criando um Menu com CSS A estrutura do nosso menu foi criada anteriormente, então veremos o resultado atual; Percebemos baixo que os menus aparecem, porém de forma tradicional. 10/6/2011 35
Criando um Menu com CSS - Codificação Vamos estilizar nosso menu. Copie o seguinte código CSS para seu arquivo. 10/6/2011 36
Criando um Menu com CSS Entendendo A única propriedade nova encontrada aqui é o list-style com valor none; Podemos observar também que cada item da lista (li) flutua à esquerda. List-style: none -> define o tipo da lista como nenhum. Isso faz sumir aqueles marcadores pontilhados que estavam antes na frente de cada ul. Teste outros estilos colocando o cursor logo após os dois pontos e pressione a tecla Ctrl + Enter (isso ativa o auto-complete do Netbeans). Veja na página a seguir. 10/6/2011 37
Criando um Menu com CSS Auto Complete Netbeans Pressionando Ctrl + Espaço, ativamos o autocomplete do NetBeans, isso facilita muito o desenvolvimento. 10/6/2011 38
Criando um Menu com CSS Entendendo Aqui temos a propriedade nova textdecoration com o valor none; Text-decoration: none -> define o tipo de efeito de decoração do texto. Se usado com valor underline, irá criar uma linha sublinhada no texto. 10/6/2011 39
Pseudo-elementos No menu feito anteriormente, usamos um pseudo elemento, hover; Devemos ter cuidado ao usá-los, pois podem não funcionar com alguns navegadores. Mais sobre pseudo-elementos aqui: http://maujor.com/tutorial/seletores_css21_parte3.php a:hover é um pseudo elemento. Indica que ao passar o mouse sobre tal elemento (neste caso, o elemento a dentro de um elemento li dentro do elemento com id menu_global), ele irá mudar a propriedade de decoração do texto, bem como o plano de fundo de tal elemento. 10/6/2011 40
Trabalho para próxima aula Como de costume, precisamos aplicar nossos conhecimentos. A proposta para a próxima aula é: Desenvolver um site com pelo menos 5 páginas; Ele deve conter um menu de navegação global que permita de qualquer página, acessar outra página; Deve usar pseudo-elementos; Deve conter DIVs para compor a estrutura de cada página; O conteúdo de cada uma, fica à sua escolha; Você pode melhorar seus trabalhos anteriores, usando o que já fez e aplicando o novo conhecimento; Bons estudos! 10/6/2011 41