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/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