Upload
others
View
2
Download
0
Embed Size (px)
Citation preview
WEBDESIGN
Professor: Paulo Marcos Trentin [email protected]
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/os-seis-melhores-complementos-do-firefox-para-desenvolvimento-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” – EntendendoE 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 propriedade.10/6/2011 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 marginentre 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 removermos a propriedade clear.10/6/2011 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 auto-complete do NetBeans, isso facilita muito o desenvolvimento.
10/6/2011 38
Criando um Menu com CSS – Entendendo
Aqui temos a propriedade nova text-decoration 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