Aula 09

CONSTRUINDO MENUS COM CSS
Vamos construir essa lista acima!!!
<html>
<head>
<title></title>
</head>
<body>
<div id = "menu">
<ul>
<li>
<a href = "arquivo1.html">Principal</a>
</li>
<li>
<a href = "arquivo2.html">Parte 1</a>
</li>
<li>
</li>
<li>
</li>
<li>
<a href = "arquivo5.html">Contatos</a>
</li>
</ul>
</div>
</body>
</html>
REGRA CSS PARA O ELEMENTO DIV

Estilizando o elemento DIV. A DIV ser menu a sintaxe #menu.
- largura de 120px (width : 120px);

-fundo cinza-claro (background-color : #999999);
- espaamento de 5px para ul (igual em toda
volta)padding : 5px);
- borda simulando um efeito de baixo relevo.(inset)
(border : 3px inset #cccccc).
Digite o cdigo css abaixo dentro da tag

< head> ...< / head>
<style type = "text/css">
#menu {width : 120px;
background : #999999;
padding : 5px;
border : 3px inset #cccccc;}
</style>
Veja como ficou!!!
REGRA CSS PARA O ELEMENTO UL

-largura de 110px (width : 110px);
-fundo preto (background-color : #000000);
-espaamento e 6px para li (igual em toda volta) (padding : 6px);
-borda simulando um efeito de alto-relevo(outset) (border : 3px outset
#cccccc);
- os navegadores quando renderizam listas reservam margem
esquerda de 50px para os marcadores. Como no queremos
marcadores, temos de eliminar a margem padro
declarando margin : 0px.
Digite o cdigo css abaixo aps o cdigo

css anterior.
#menu ul {width : 110px;
background-color : #000000;
padding : 6px;
border : 3px ouset #ffffff;
margin : 0;}
A aplicao das regras CSS nos elementos DIV e UL

resulta em exibio do menu no
navegador, conforme mostrado.
REGRA CSS PARA O ELEMENTO LI

-eliminar os marcadores de listas (as bolinhas pretas em cada item) (liste-style
: none);
-colocar um espaamento em volta das tags <li> (5px esquerda e direita,
3px em cima e embaixo) (padding : 3px 5px);
-fundo verde-claro (color : #5AE294);
-margem embaixo para obter espao entre os itens da lista (margin-bottom :
2px);
- definio do tipo e tamanho da letra (font : 12px verdana, arial, helvetica
sans-serif);
Digite o cdigo aps o anterior sempre entre as tags

< style>...</style>
#menu li {list-style : none;

padding : 3px 5px;
background-color : #5AE294;
margin-bottom : 2px;
font : 12px verdana, arial, helvetica, sansserif;}
A aplicao das regras CSS nos elementos DIV, ul e li resulta em

exibio do
menu no navegador.
REGRA CSS PARA O ELEMENTO A.

Vamos estilizar trs estados do link:
-link inicial quando a pgina carregada a: link, cor

branca sem sublinhado.
- link visitado a: visited, cor bege sem sublinhado.
-link com o mouse em cima a: hover, cor preta fundo
branco;
- link clicado a: active no ser estilizado.
Digite a ltima parte do cdigo css:

#menu li a {display : block;
color : #ffffff;
text-decoration : none;}
#menu li a:visited {color : #ffffcc;}
#menu li a:hover {color : #000000;
background-color:#ffffff;}
Veja o cdigo completo!!!

<html>
<head>
<title>Menus</title>
#menu {width : 120px;
background : #999999;
padding : 5px;
border : 3px inset #cccccc;}
#menu ul {width : 110px;
padding : 6px;
border : 3px ouset #ffffff;
margin : 0;}
#menu li {list-style : none;

padding : 3px 5px;
background-color : #5AE294;
margin-bottom : 2px;
font : 12px verdana, arial, helvetica, sansserif;}
#menu li a {display : block;
color : #ffffff;
#menu li a:visited {color : #ffffcc;}
#menu li a:hover {color : #000000;
background-color:#ffffff;}
</style>
</head>
<body>
<div id = "menu">
<ul>
<li>
<a href =
"menu_02.html">Principal</a>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
<a href =
"arquivo5.html">Contatos</a>
</li>
</ul>
</div>
</body>
</html>
Veja o menu que vamos fazer!!!
Copie e cole o cdigo abaixo em uma

pgina html nova.
<html>
<head>
<title></title>
#menuhor {border : none;
margin : 0;
font : 12px arial, sans-serif;}
#menuhor li{list-style : none;
margin : 0;
display : inline;}
Fim do cdigo CSS

#menuhor li a {height : 1px;
padding : 8px 6px;
margin : 0;
border : 1px solid #0042ff;
background-color: #999;
#menuhor li a:link {color: #fff;}
#menuhor li a:visited {color : #fff;}
#menuhor li a:hover {background-color : #859ceo;
color: #000;
border-color : #000;}
</style>
Cdigo HTML
</head>
<body>
<ul id = "menuhor">
<li>
<a href = "menu_01.html" title = "Parte 0">Parte 0</a>
</li>
<li>
<a href = "#" title = "Parte 1">Parte 1</a>
</li>
<li>
</li>
<li>
</li>
<li>
Fim do cdigo
</li>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</body>
</html>
Veja como ficou!!!
ROLLOVER DE IMAGENS EM MENUS

COM CSS
O menu mostrado possui as seguintes caractersticas:
- constitudo por seis links;
- os links tm uma imagem de fundo e bordas; no estado
mouseover (quando o
mouse passado sobre o link), h troca de imagem de
fundo;
- a largura do menu igual a 180px.
ROLLOVER DE IMAGENS EM MENUS

COM CSS
Ao construir as imagens de fundo para usar em elementos,
devemos ter em mente
que o usurio poder ter configurado seu navegador para exibir
tamanhos de
letras grandes ou mesmo outras definies. Dessa maneira, temos
que
dimensionar suas imagens de fundo maiores que a caixa do bloco
do elemento
HTML para fornecer um espao extra de imagem e assim evitarmos
que a imagem se
repita em um fundo maior que o que foi designado.
Usaremos imagens 280 X 55, propositalmente exageradas.
Cdigo HTML para um menu de seis links.

<body>
<div id = "menur">
<ul>
<li><a href = "#">Parte 1</a></li>
<li><a href = "#content">Parte 6</a></li>
</ul>
</div>
</body>
</html>
Veja como ficou!!!
Para assegurarmos total controle sobre o posicionamento da lista que contm

o
menu, devemos encerrar o menu em uma DIV e declarar as regras CSS para
esta
DIV.
Chamaremos DIV #MENU.
#menu {position : absolute;
left : ## px; /* posi o direita */
top : ## px; /* posi o abaixo */
width : 180px;}
</style>
Essa regra CSS fornece ao menu portabilidade, significando que, defindo

os
valores left e top, colocamos o menu exatamente onde quisermos no
documento e
com a preciso de pixels. Tambm definimos uma largura para a DIV.
As coordenadas para position : absolute tm origem no canto superior
esquerdo.
TOP : distncia para baixo;
LEFT : distncia para a direita.
Para inserir o menu dentro de uma clula de tabela ou posiciona-la relative
ou
float, basta alterar as propriedades utilizando esse regra.
Como observamos no cdigo base mostrado no comeo da seo, o
navegador
renderizou a lista com um marcador de lista (uma bolinha preta na frente de
cada item) e um recuo par o texto. necessrio ento criar uma regra CSS
para
elimin-lo. A propriedade CSS que controla o marcador das lista liststyletype.
Para remover o recuo de texto, h um detalhe que necessrio observar.
Alguns navegadores usam a propriedade margin e outros a padding para o
recuo
das listas. Note que na regra CSS mostrada a seguir definimos as
caractersticas das letras que foram escolhidas para o menu.
#menu ul {
list-style-type : none; /* remove o marcador */
margin : 0; /*remove o recuo no internet Explorer e no Opera */
padding : 0; /*remove o recuo no Mozilla e Netscape Navigator */
font : bold 16px arial, helvetica, sans-serif;
O elemento li define cada uma das linhas que contm os links. A

regra CSS
adicionada a esse elemento controla a distncia entre os links pela
definio
da propriedade margin.
Separamos os links na vertical definindo uma margem inferior.
#menu li { margin-bottom : 1px }
Dentro de li esto inseridos os elementos inline a. Para que seja
possvel
clicar em toda a rea da caixa do link, devemos declarar
display:block. Se
omitirmos essa declarao, somente as letras que determinam o link
podero ser
clicveis.
necessrio definir tambm como ser a aparncia da rea clicvel
(cores,
bordas, imagens de fundo, espaamentos padding e efeitos
visuais em
geral).
#menu a {
display : block;
padding : 1px 0 1px 25px;
border : 1px solid #000000;
width : 180px;
color : #ffffff;
text-decoration : none;
background-image : url(caminho/imagem.jpg);
voice-family : \}\; /*box model Hack */
voice-family : inherit;
width : 153px;
}
<body> #menu a {width : 153px;}
CLCULOS DO BOX MODEL HACK

Hack = largura padding-left + padding-right + border-left + border-right)
Hack = 180px (25px + 0px + 1 px + 1px) = 180px 27px = 153px
Devemos observer que um padding esquerda de 25px foi definido com a
finalidade de colocar o texto descritivo do link, direita da figura da
bolinha esquerda localizada no desenho do fundo.
Depois de explicar as regras CSS para cada elemento, vamos mostrar

a regra CSS para fazer o efeito rollover no link.
#menu a : hover {
background-color : #ffff99;
background-image : url(caminho/imagem2.jpg);
color : #000000;
}
Como pose ser visto no cdigo, o fundo foi trocado (cor e imagem),
alm da cor do texto descritivo do link para constratar com o novo
fundo. No h efeito de troca na borda. Se quisermos trocar a borda
no rollover, devemos declarar a nova borda nessa regra. Se no
quisermos, podemos omitir nessa regra a declarao que a borda ser
herdada.
A estilizao de a : visited e a : active se faz de maneira similar aos

exemplos j mostrados em sees anteriores. No devemos nos
esquecer porm, que a ordem das declaraes dos estados dos links
determinam o efeito cascata, sendo que, dependendo da ordem, as
regras podero mostrar um efeito diferente do esperado.
<html>

<head>
<title>Menu - CSS</title>
#menur {position : absolute;
left : 100px; /* posi o direita */
top : 100px; /* posi o abaixo */
width : 180px;}
#menur ul {list-style-type : none;
margin :0;
paddinf : 0;
font : bold 16px arial, helvetica, sans-serif;}
#menur li {margin-bottom : 1px;}
#menur a {display : block;

padding : 1px 0 1px 25px;
width : 180px;
color : #ffffff;
text-decoration : none;
background-image : url(imagens/vermelho.jpg);
voice-family : "\"}\"";
voice-family : inherit;
width : 153px;}
body>#menur a {width:153px;}
#menur a:hover {border : 1px solid #000000;
background-color : #ffff99;
background-image : url(imagens/verde.jpg);
color : #000000;}
#content_e{
float : left;
}
#content_d{
float : right;
}
</style>
</head>
<body>
<div id = "menur">
<ul>
<li><a href = "#content">Parte 6</a></li>
</ul>
</div>
</body>
</html>
Trabalho para ser enviado por email:

Criar um pequeno site com no mnimo 4 pginas usando o conhecimento
adquirido durante o curso.
Este site dever ter uma pgina inicial : index.htm.
Uma pgina de cadastro com: matrcula, nome, endereo, rua, nmero,
complemento, bairro, cidade, estado, cep. Botes enviar e limpar.
Uma pgina com textos e imagens sobre o assunto abordado.
Uma pgina com imagens.
Todas as pginas devero ter menus com links para todas as outra
pginas.
Todas as pginas tero LayOut com duas colunas, menos a index.html que
ter trs colunas no LayOut.
Todas as pginas devero estar organizada em pastas.
O trabalho valer com avaliao para o curso de Criao de Sites e dever
ser enviado para o email: JGEFERREIRA@GMAIL.COM com o nome do
aluno e o nome do curso.
This document was created with Win2PDF available at http://www.win2pdf.com.

The unregistered version of Win2PDF is for evaluation or non-commercial use only.
This page will not be added after purchasing Win2PDF.

Aula 09

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Aula 09

Загружено:

Авторское право:

Доступные форматы

CONSTRUINDO MENUS COM CSS

Vamos construir essa lista acima!!!

REGRA CSS PARA O ELEMENTO DIV

- largura de 120px (width : 120px);

Digite o cdigo css abaixo dentro da tag

Veja como ficou!!!

REGRA CSS PARA O ELEMENTO UL

Digite o cdigo css abaixo aps o cdigo

A aplicao das regras CSS nos elementos DIV e UL

REGRA CSS PARA O ELEMENTO LI

Digite o cdigo aps o anterior sempre entre as tags

#menu li {list-style : none;

A aplicao das regras CSS nos elementos DIV, ul e li resulta em

REGRA CSS PARA O ELEMENTO A.

-link inicial quando a pgina carregada a: link, cor

Digite a ltima parte do cdigo css:

Veja o cdigo completo!!!

#menu li {list-style : none;

Veja o menu que vamos fazer!!!

Copie e cole o cdigo abaixo em uma

Fim do cdigo CSS

Veja como ficou!!!

ROLLOVER DE IMAGENS EM MENUS

ROLLOVER DE IMAGENS EM MENUS

Cdigo HTML para um menu de seis links.

Veja como ficou!!!

Para assegurarmos total controle sobre o posicionamento da lista que contm

Essa regra CSS fornece ao menu portabilidade, significando que, defindo

O elemento li define cada uma das linhas que contm os links. A

CLCULOS DO BOX MODEL HACK

Depois de explicar as regras CSS para cada elemento, vamos mostrar

A estilizao de a : visited e a : active se faz de maneira similar aos

#menur a {display : block;

Trabalho para ser enviado por email:

This document was created with Win2PDF available at http://www.win2pdf.com.

Вам также может понравиться