CSS Listas e Menus

CRIAÇÃO DE MENU USANDO CSS


A técnica de criar de criar menus em CSS é com certeza uma das tarefas mais apreciadas por web designers, ela possibilita um visual atraente sem acarretar “lentidão” ao site.

Para criar menus em CSS, começamos por criar uma lista de tópicos em formas de links para que as páginas do site possam ser integradas as demais, para isso usamos a tag <ul>.

Usamos a tag <ul> quando queremos uma lista não ordenada, dentro desta tag inserimos os tópicos da lista através da tag <li> (lista), exemplo a seguir:



<ul>

<li> <a href=”índex.html”> HOME </a> </li>

<li> <a href=”servicos.html”> SERVIÇOS </a> </li> <li> <a href=”contato.html”> CONTATO </a> </li> </ul>


Na tela do computador a renderização mostrará:

·         HOME

·         SERVIÇOS

·         CONTATO


De certa forma já temos um menu, mas convenhamos muito simples e sem graça. Ao criarmos uma div ( Do inglês division, define uma divisão ou uma seção em um documento HTML), podemos formatar esta lista (menu) usando CSS e seu visual ficará muito mais atraente, exemplo de menu com div:


<div id=”menu”>

<ul>

<li> <a href=”índex.html”> HOME </a> </li>

<li> <a href=”servicos.html”> SERVIÇOS </a> </li> <li> <a href=”contato.html”> CONTATO </a> </li> </ul>

</div>


Por  enquanto não haverá  mudança no visual,  pois  ainda  não criamos  a formatação

CSS, antes, vamos entender algumas funções de CSS:

Align: usada para alinhar blocos de informação usando os eixos X e Y, nossa “tela” tem a parte superior (top), direita (right), inferior (bottom) e esquerda (left), é neste sentido que usamos a programação para mover os objetos, exemplo:

#menu {align:10px 0 0 40px}

No exemplo acima, temos uma programação para mover um objeto (div menu) mantendo uma distância de 10pixel da margem superior, 0 entre a esquerda e inferior e 40 pixels da margem direita.


padding: comando semelhante ao align, a diferença entre ambos, é que usamos o padding para alinhar o conteúdo dentro da div, enquanto o align, serve para alinhar a própria div em relação ao demais elementos do layout.



float: propriedade que faz o objeto flutuar à esquerda ou à direita do restante do conteúdo. Caso você queira o menu à direita, poderá utilizar o comando a seguir:

#menu {float:right}


width: comando que define a largura da área de um elemento. Imagine um menu na horizontal, que ocupe 80% da área da tela, independente da resolução, neste caso, poderá utilizar o comando a seguir:

#menu {width:80%}


height: comando CSS que define a altura de um elemento. Assim como o comando de largura, pode receber valores absolutos em pixel ou trabalhar com valores percentuais. Exemplo: #menu {height:90px}


No caso do menu, podemos aplicar diferentes formatações para os itens da lista, definir imagem de fundo, remover o caractere característico da lista, etc. Por exemplo, o comando list-style:none, se aplicado à ul, define que não queremos o símbolo bullet “bolinha que precede cada item da lista não ordenada”.

Para nossa próxima tarefa, devemos criar um site com pelo menos três páginas; em todas as páginas devem conter um menu em forma de lista usando a tag div, como o exemplo abordado a seguir:


<div id=”menu”>

<ul>

<li> <a href=”índex.html”> HOME </a> </li>

<li> <a href=”servicos.html”> SERVIÇOS </a> </li>

<li> <a href=”contato.html”> CONTATO </a> </li>

</ul>

</div>


Podemos aplicar aos links do menu a propriedade transition oferecendo feedback ao usuário. A transição do estado do link pode ser definida com uma cor inicial, sendo esta substituída ao passarmos o mouse sobre o link. A seguir exemplo de utilização.


#menu a {color: #000080}

#menu a:hover { #228B22}

No exemplo acima foi definido um tom de azul para o instante inicial (NavyBlue), o elemento hover (rondar em torno) do link quando acionado, substitui a cor inicial por um tom de verde (ForestGreen).
Observe a estrutura HTML e CSS completa abaixo...

<html>
<head>
<!--Declaração do método de formatação interno do CSS-->
<style type="text/css">

/*Início da formatação da div menu, definição do tamanho, largura, posicionamento e imagem de fundo*/

#menu {
width: 980px;
height: 90px;
float: left;
padding: 30px 0 0 300px;
background: url(images/img03.jpg) no-repeat;
}


/*Definição do estilo de itens da lista do menu, a margem com valor zero define que os itens sejam centralizados*/

#menu ul {
list-style: none;
margin: 0;
}


/*Posicionamento dos itens da lista, área que sera ocupada dentro da div por cada item*/

#menu li {
display: block;
float: left;
width: 140px;
padding: 0 0 5px 0;
}


/*Define a aprarência que cada item deve possuir ao carregar a página*/

#menu a {
padding-left: 24px;
background: url(images/img04.gif) no-repeat left center;
text-decoration: none;
font: bold 16px "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#FFA500;
font-style: italic;
}

/*Define a aprarência que cada item deve possuir ao carregar ao passar o mouse sobre o mesmo*/

#menu a:hover {
background-image: url(images/img05.gif);
font: bold 15px "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#FFA500;
font-style: italic;
}

</style>
</head>
<body>
<!--div menu que é referenciada no CSS, o CSS é uma linguagem orientada a objeto, o id funciona no sentido de identificação similar à chave primária-->

<div id="menu">
<ul>
<li><a href="index.html" title="">HOME</a></li>
<li><a href="servicos.html" title="">SERVIÇOS</a></li>
<li><a href="contato.html" title="">CONTATO</a></li>
</ul>
</div>

</body>
</html>


Veja o exemplo em navegador:




Pronto! Pronto!


fonte: Profº José Roberto Lima,

PHP Looping

Estrutura de laços em PHP 


Aprenda a fazer while, do while, for e foreach no PHP. Saiba o que cada um tem de específico e quais as características de cada um deles. 

Laços em PHP: While


O while significa que deve executar o código dentro dos parênteses até que a condição seja satisfeita. O while é composto da palavra while, seguido de abertura de parêntese, uma condição e fechamento de parêntese, o que vier abaixo é o código que será repetido até que a condição seja satisfeita. Veja: 

<?php
$contador = 0;
while($contador < 10)
{
echo "O contador agora e: " . $contador . " ";
$contador++;

/*Resultado:
O contador agora e: 0
O contador agora e: 1
O contador agora e: 2
O contador agora e: 3
O contador agora e: 4
O contador agora e: 5
O contador agora e: 6
O contador agora e: 7
O contador agora e: 8
O contador agora e: 9
*/

?>

Temos a palavra while, a abertura de parêntese, a condição nossa que é a variável $contador ser menor que 10, fechamento de parêntese, abertura de chave, e é este código que será repetido até que $contador seja menor que 10, e fechamento de chave. 

O código echo é para ilustrar o avanço do contador. Já a linha $contador++; significa que estamos incrementando o contador, ou seja, somando 1 a cada vez que o laço fecha o ciclo. 

Em palavras mais fáceis de compreender o código faz:

Contador = 0;

Enquanto o contador for menor que 10 faz: 

Escreve a mensagem na tela com o valor atualizado do contador;

Incrementa o contador;

Verifica novamente se o contador é menor que 10: 

Sim, então percorre o laço novamente;

Não, então termina o código.

Este laço vai correr 10 vezes o código entre chaves, começando a mostrar que o contador inicial é 0 e percorrendo até o 9. Por que o contador não foi até o 10? Por que nosso laço esta verificando e correndo o código enquanto o $contador for menor que 10. 

Como correr até o número 10? 

Para percorrer até o número 10, você deve fazer a condição, <= (menor ou igual), conforme exemplo abaixo:

<?php

$contador = 5;
while($contador > 0)
{
echo "O contador agora e: " . $contador . "
";
$contador--;
}


No primeiro exemplo, fiz com que o contador fosse até o número 10, então, começando em 0 ele vai percorrer 11 vezes o laço.
No segundo exemplo, fiz o contrário do primeiro, temos um valor no contador = 5, e vamos correr o laço até que este contador seja > 0 (maior que zero). Ou seja, do 5 até o 1. E ao invés de eu incrementar o contador, eu decrementei ele, ou seja, diminuí um valor a cada passagem pelo laço.
No terceiro exemplo o teste é feito até que seja maior ou igual a 0, ou seja, vai percorrer do 5 até o 0, serão 6 vezes no laço. 

RESUMO: 

++ = incrementa um valor no contador
-- = decrementa um valor no contador 


Laços em PHP: Do while


Muito similar ao while, porém com uma única diferença. Ao invés de primeiro testar a condição, o PHP vai primeiro passar pelo laço para depois testar a condição. A sintaxe está abaixo: 

<?php
$contador = 10;
do
{
echo "O contador agora e: " . $contador . " <br> ";
$contador--;
}
while($contador > 0)
/*

RESULTADO:
O contador agora e: 10
O contador agora e: 9
O contador agora e: 8
O contador agora e: 7
O contador agora e: 6
O contador agora e: 5
O contador agora e: 4
O contador agora e: 3
O contador agora e: 2
O contador agora e: 1
*/

?>

O laço vai sempre entrar na primeira vez para depois fazer a comparação da condição. Ou seja, o DO WHILE, sempre executa pela primeira vez, independente da condição ser verdadeira, veja o que estou falando no exemplo abaixo:

<?php
$contador = 0;
do
{
echo "O contador agora e: " . $contador . " ";
$contador--;
}
while($contador > 0)

/*
RESULTADO:
O contador agora e: 0
*/

?>

Como pode ver, o contador mesmo sendo 0 entrou no laço, pois ele vai testar somente no final. Esta é a diferença entre o WHILE e o DO WHILE. 

Laços do PHP: FOR


O laço FOR em PHP é muito usado quando você sabe de onde até onde quer ir. A sintaxe do FOR pode ser vista abaixo:

<?php
for($contador = 0; $contador < 10; $contador++)
{
echo "O contador agora e: " . $contador . "
";
}

/*
RESULTADO
O contador agora e: 0
O contador agora e: 1
O contador agora e: 2
O contador agora e: 3
O contador agora e: 4
O contador agora e: 5
O contador agora e: 6
O contador agora e: 7
O contador agora e: 8
O contador agora e: 9
*/

?>

Lendo o comando FOR:

Faça: 

Contador começa em 0;

Enquanto o contador for menor que 10;

Incrementa o contador;

Executa os comandos necessários dentro do laço;

No for, iniciamos setando nossa variável pelo valor inicial, seguido de um ponto-e-vírgula, depois definimos a nossa condição (no exemplo, o contador deveria ser menor que zero para satisfazer a condição), seguido de outro ponto-e-vírgula, e a terceira parte é onde incrementamos o valor do contador do laço. Para só então começarmos a entrar nos códigos que devem ser executados repetidamente. 

Correndo um ARRAY de única linha com FOR em PHP: 


Como mencionado no tópico sobre arrays, vou mostrar aqui como percorrer um array com o FOR, confira no exemplo: 

<?php
$frutas = array('maca','banana','melancia','melao','abacaxi','laranja');
for($posicao = 0; $posicao < count($frutas); $posicao++)
{
echo "A fruta na posicao: " . $posicao . " e " . $frutas[$posicao] . " ";
}

/*

RESULTADO:
A fruta na posicao: 0 e maca
A fruta na posicao: 1 e banana
A fruta na posicao: 2 e melancia
A fruta na posicao: 3 e melao
A fruta na posicao: 4 e abacaxi
A fruta na posicao: 5 e laranja
*/

?> 

No exemplo acima, temos um array de única linha, onde chamei ele de frutas e adicionei alguns valores dentro dele com o nome de algumas frutas. Depois no comando FOR, iniciei a variável $posicao = 0; e enquanto a posição fosse menor que COUNT($frutas); eu incrementaria a $posicao.

Bom, a função COUNT que chamei, conta a quantidade de itens dentro de um array. 

Se você der um:
echo count($frutas);
//resultado = 6
?> 

Ele vai retornar a quantidade de posições que tem dentro do array. Veja que a quantidade de posições é 6, pois temos 6 "frutas" dentro do array. E não o valor 5 que foi o resultado do for, lembrando do último tópico que o ARRAY começa a contar em 0. 

Correndo um ARRAY de multipla linha com FOR em PHP:


 Assim como única linha, podemos percorrer um array com multi-linhas, para isto, precisamos ao invés de usar um for, vamos usar 2 e assim precisamos de dois contadores também, veja no exemplo abaixo: 

<?php
$valores = array(
array('linha0pos0','linha0pos1','linha0posx'),
array('linha1pos0','linha1pos1','linha1posx'),
array('linhaxpos0','linhaxpos1','linhaxposx'),
);
for($posicao1 = 0; $posicao1 < count($valores); $posicao1++)
{
for($posicao2 = 0; $posicao2 < count($valores[$posicao1]); $posicao2++)
{
echo "O valor na linha ".$posicao1." coluna " . $posicao2 . " e ==== " . $valores[$posicao1][$posicao2] . " ";
}
}

/*
print_r do array
Array
(
[0] => Array
(
[0] => linha0pos0
[1] => linha0pos1
[2] => linha0posx
)
[1] => Array
(
[0] => linha1pos0
[1] => linha1pos1
[2] => linha1posx
)
[2] => Array
(
[0] => linhaxpos0
[1] => linhaxpos1
[2] => linhaxposx
)
)

RESULTADO =============
O valor na linha 0 coluna 0 e ==== linha0pos0
O valor na linha 0 coluna 1 e ==== linha0pos1
O valor na linha 0 coluna 2 e ==== linha0posx
O valor na linha 1 coluna 0 e ==== linha1pos0
O valor na linha 1 coluna 1 e ==== linha1pos1
O valor na linha 1 coluna 2 e ==== linha1posx
O valor na linha 2 coluna 0 e ==== linhaxpos0
O valor na linha 2 coluna 1 e ==== linhaxpos1
O valor na linha 2 coluna 2 e ==== linhaxposx
*/

?>

Para contar um array múltiplo, como pode ter visto, temos um FOR dentro de outro FOR. E também temos 2 contadores, o $posicao1 e o $posicao2. Usamos 2x a função COUNT, uma para saber o número de linhas (que é para correr o primeiro FOR) e o segundo que é para saber o número de colunas (que é para correr o segundo FOR).  

Ou seja, temos o primeiro FOR para correr todas as linhas, e o segundo FOR para correr todas as colunas da linha em que o primeiro FOR se encontra.
Foram 3 exemplos de como percorrer o FOR. Espero que tenha compreendido como ele funciona. Para quem está iniciando pode parecer um pouco complicado, mas quando for utilizar ele com mais frequência, verá que é simples. No final deste tópico vou colocar alguns exercícios para que você os faça, também vou deixar todos os exemplos em um arquivo que vou deixar para download. Assim poderá ver como foi feito e mexer nos itens para estudar e testar da forma que melhor lhe convir. 

Laços em PHP - FOREACH


O FOREACH tem o mesmo funcionamento do FOR, porém, ele não precisa de contador. Ou seja, você vai correr o laço sabendo em que posição está. Veja abaixo o primeiro exemplo da SINTAXE do FOREACH.

<?php
$frutas = array('maca','banana','melancia','melao','abacaxi','laranja');
foreach($frutas as $fruta)
{
echo "A fruta e: ". $fruta . " <br> ";
}

/*
RESULTADO:
A fruta e: maca
A fruta e: banana
A fruta e: melancia
A fruta e: melao
A fruta e: abacaxi
A fruta e: laranja
*/

?>


A sintaxe do FOREACH é assim, você inicia com FOREACH, abre parênteses, diz qual é o array a ser percorrido, define a palavra AS e depois define o nome da variável que vai estar na posição atual. O próprio FOREACH vai inserir o valor na variável escolhida, e está poderá ser usada dentro do laço, conforme o exemplo acima. 

Correndo um array multi-linhas com FOREACH


Fiz um array com tipos de frutas e frutas, que pode ser visto abaixo:

<?php
$frutas = array(
'vermelhas' => array ('maca','melancia'),
'amarelas' => array ('banana','melao','abacaxi'),
'verdes' => array ('pera','limao','abacate')
);
?>


Como pode ver, temos a linha como sendo os tipos de frutas (vermelhas, amarelas e verdes), e dentro de cada um dos tipos temos as frutas que pertencem ao grupo. Abaixo o código para percorrer elas:

foreach($frutas as $tipo => $frutastipo)
{
echo "
O TIPO DE FRUTA E: ".$tipo."
";
foreach($frutastipo as $fruta)
{
echo "A fruta e: ". $fruta."
";
}
}

/*
RESULTADO DO FOREACH
O TIPO DE FRUTA E: vermelhas
A fruta e: maca
A fruta e: melancia
O TIPO DE FRUTA E: amarelas
A fruta e: banana
A fruta e: melao
A fruta e: abacaxi
O TIPO DE FRUTA E: verdes
A fruta e: pera
A fruta e: limao
A fruta e: abacate
*/

?>


Como pode ver, temos um foreach dentro de outro. No primeiro foreach, fizemos um outro uso dele. Diferente do primeiro exemplo, neste nós precisamos saber do nome da chave do array (os tipos das frutas) para que possamos identificar os valores dentro dos tipos. Veja o código PHO abaixo...


Pronto! Pronto!

fonte:oficinadanet,  phptest, excript.com