Tutorial De Camadas (divs)
#1
Posted 21/12/2002, 14:28
Os browsers que suportam códigos W3C são: IE5+, NS6+, Opera, Mozilla.
Para os que se interessarem mais sobre o assunto, chequem este link (em Inglês): http://www.w3c.org/
Por que somente o suporte aos browsers W3C?
A tendência que temos hoje é de que todos os browsers convirjam para S.C. (Standards Compliant), que nada mais é que uma linguagem única que funcione em todos os navegadores.
A tag DIV, suportada nos browsers W3C mencionados no início do tutorial, cria uma camada nova. A partir desta tag, é possível escolher uma identidade (fundamental neste tutorial), posicioná-la no documento, especificar borda, visibilidade (tb usada neste tutorial), afixá-la no documento (chamado de collapsed), cores, margens, espaçamentos, dentre outros recursos.
Atribuindo uma identidade numa camada:
ID="nome_da_camada"
Adicionando CSS na camada:
STYLE="..."
Vou inserir aqui alguns dos principais códigos CSS usados em uma camada:
POSITION -> posicionamento da camada. Pode ser ABSOLUTE (absoluto), que toma o início do documento como referência ou RELATIVE (relativo), que tema algum objeto como referência.
TOP ou BOTTOM -> posiciomento (normalmente em pixels (px)) da camada. Usa-se TOP quando se posiciona levando em consideração o topo de nossa referência (documento ou objeto) e BOTTOM quando usa-se a base como referência.
LEFT ou RIGHT -> posiciomento (normalmente em pixels (px)) da camada. Usa-se LEFT quando se posiciona levando em consideração a esquerda de nossa referência (documento ou objeto) e RIGHT quando usa-se a direita como referência.
WIDTH -> Largura (normalmente em px. O uso de % é possível, mas não é garantido o uso em todos os browsers) da camada.
HEIGHT -> Altura (normalmente em px. O uso de % é possível, mas não é garantido o uso em todos os browsers) da camada.
ZINDEX -> Define a profundidade (o plano) no qual a camada está. Usa-se somente números inteiros que variam entre 1 a infinito. O número máximo que eu já vi, foi 1000; portanto até 1000 eu garanto! HEHEHE... ah, o exemplo: 10.
BACKGROUND -> atribui uma cor de fundo ou uma imagem na camada. Para a cor de fundo, pode-se usar o nome da cor (por ex.: black (preto), white (branco)), o código Hexadecimal (por ex.: #000000 (preto), #FFFFFF (branco)) ou o código RGB da cor (por ex.: rgb(0,0,0) (preto), rgb(255,255,255) (branco)). pra atribuir uma imagem, url(path/imagem.ext). Não um BACKGROUND, significa deixá-lo transparente.
BORDER -> atribui uma borda na camada. Primeiro, define-se a espessura da borda, depois a cor e logo em seguida o tipo. Quando se escreve dentro da tag style a borda, normalmente usa-se a espessura, o tipo e a cor. A borda, pode ser de cor sólida, tracejada, em pontos, etc. Para melhorar a explicação, vou colocar aqui alguns tipos de borda: dotted, dashed, solid, double, groove, ridge, inset, window-inset, outset. Sugiro que você teste todos os estilos de borda, para se familiarizar com elas. Para concluir sobre BORDER, falta o exemplo: 3px solid rgb(0, 0, 0). Aqui definimos uma borda com 3px de espessura, do tipo sólido e da cor preta.
VISIBILITY -> Base do nosso tutorial, que é a alternância entre mostrar/esconder camadas. Com este atributo, você pode deixar a camada visível (visible ou show), invisível (hidden ou none).
Há outros atributos, como o OVERFLOW, o PADDING, o FILTER (aqui começa a interação CSS + DirectX), etc.
Não convém continuar com a explicação sobre estes atributos, pois muitos deles você não usará.
O separador entre os atributos é o ponto-e-vírgula (.
Para concluir, falta um exemplo de DIV completo.
<DIV ID="teste" STYLE="POSITION: absolute; TOP: 5px; LEFT: 5px; WIDTH: 400px; HEIGHT: 300px; ZINDEX: 2; BACKGROUND: #FFFFFF; BORDER: 3px dotted #000000; VISIBILITY: visible;">
Algum conteúdo
</DIV>
Com isso, concluímos nosso tutorial sobre camadas (DIVs).
Espero ter dado uma boa introdução a todos sobre camadas.
Caso alguma coisa, entrem em contato comigo.
// Dados:
Nome("Guilherme Blanco");
Localidade("São Carlos - SP/Brasil");
Cargo("Manutenção");
</script>
#2 Loukinho157
Posted 06/04/2003, 12:26
#3 Towd
Posted 07/06/2003, 03:49
#4
Posted 07/06/2003, 04:00
"O maior segredo da vida é que a mesma não é um processo de descoberta, mas sim de criação.
Você não está se descobrindo, mas se recriando.
Por isso não tente descobrir quem você é, mas busque determinar... "Quem você quer ser"!!!
#5
Posted 07/06/2003, 23:58
CSS?? Né naum.. É HTML pombas.. Vai discutir com o GB???Nossa cara Show este tuto ai hein, mas Layers (Camadas) é CSS, mas ai parabens belo tutorial
Mas é HTML mesmo.. Só que a maioria dos atributos que se usam nele são em CSS e/ou JavaScript..
Fui..
chinello at gmail dot com
System > Athlon 64 3200+ Mobile | Kubuntu 7.04 Fesity Fawn AMD64 | Kernel 2.6.20-16
Coding @ KDE 3.5.7 | PHP 5.2.1 | Apache 2.2.3 | MySQL 5.0.38
#6 cRazYY|mAN|
Posted 10/06/2003, 17:02
C tem ai a lista dos códigos hexadecimais?
se tievr cola ai no topic lz vlwzao
0_o
#7 lucas souza
Posted 13/06/2003, 02:27
BACKGROUND -> atribui uma cor de fundo ou uma imagem na camada. Para a cor de fundo, pode-se usar o nome da cor (por ex.: black (preto), white (branco)), o código Hexadecimal (por ex.: #000000 (preto), #FFFFFF (branco)) ou o código RGB da cor (por ex.: rgb(0,0,0) (preto), rgb(255,255,255) (branco)). pra atribuir uma imagem, url(path/imagem.ext). Não um BACKGROUND, significa deixá-lo transparente.
C tem ai a lista dos códigos hexadecimais?
se tievr cola ai no topic lz vlwzao
0_o
Esta é uma tabela de códigos hexadecimais que tinha pego num site:
http://www.meusarqui...leta-de-cor.gif
FLW pru 6.
#8 Visitante - anjinhow
Posted 22/06/2003, 20:08
#9
Posted 22/06/2003, 21:51
Já tem um tutorial falando sobre isso na seção de JavaScript..Oi como ficaria o codigo caso eu colocase um botão fechar para ele fechar a layer quando clicar nele, agradeço desde já
Segue o link:
Mostrando/Escondendo camadas, Tutorial completo para browsers W3C
Fui..
chinello at gmail dot com
System > Athlon 64 3200+ Mobile | Kubuntu 7.04 Fesity Fawn AMD64 | Kernel 2.6.20-16
Coding @ KDE 3.5.7 | PHP 5.2.1 | Apache 2.2.3 | MySQL 5.0.38
#10
Posted 18/09/2003, 16:48
Como movimentar uma camada ?
#11
Posted 22/09/2003, 11:49
algo do tipo:
function move_layer( sId ) {
// Capturando valores atuais
var posTop = parseInt(document.getElementById(sId).style.top);
var posLeft = parseInt(document.getElementById(sId).style.left);
// Incrementando novos valores
posTop += 5;
posLeft += 5;
// Setando novas posições para a camada
document.getElementById(sId).style.top = posTop;
document.getElementById(sId).style.left = posLeft;
// Criando a animação
window.setTimeout("move_layer("+sId+")", 500);
}
window.onload = function () {
move_layer("logotipo");
}
Espero ter respondido sua dúvida... isso aki é só um exmeplo rápido de como se pode fazer.
[]s,
// Dados:
Nome("Guilherme Blanco");
Localidade("São Carlos - SP/Brasil");
Cargo("Manutenção");
</script>
#12
Posted 25/09/2003, 12:21
Esse tutorial foi muito bom pra mim, valeu. . .só falta uma coisinha:
". . .pra atribuir uma imagem, url(path/imagem.ext). . ."
O que entra no lugar do "PATH", ou ele fica ali mesmo?
Aguardo resposta. . .
Obrigado.
Wagner Bianchi
$know_that = "para aprender";
$reason = "DEUS";
$greeting = "Muito prazer, sou Wagner Bianchi!";
$mail = "wagnerbianchi@yahoo.com.br";
echo "Tenha " . $reason . " e humildade " . $know_that . "!<BR>";
echo "$greeting<BR>";
echo "$mail<BR>";
?>
#13
Posted 28/09/2003, 16:21
exemplo:
system/img/
[]s,
// Dados:
Nome("Guilherme Blanco");
Localidade("São Carlos - SP/Brasil");
Cargo("Manutenção");
</script>
#14
Posted 29/09/2003, 08:26
Wagner Bianchi
$know_that = "para aprender";
$reason = "DEUS";
$greeting = "Muito prazer, sou Wagner Bianchi!";
$mail = "wagnerbianchi@yahoo.com.br";
echo "Tenha " . $reason . " e humildade " . $know_that . "!<BR>";
echo "$greeting<BR>";
echo "$mail<BR>";
?>
#15
Posted 28/10/2003, 14:57
1- É possível fazer uma camada com o fundo 50% visível, ou seja fazer uma camada que ao clicar ela tenha o fundo preto, mas apareça parcialmente a página de fundo que sustenta a camada????
2- É possível fazer o efeito de ao clicar num link a camada que esta invisível fica visível mas esmaecendo, ou seja ir aparecendo aos poucos e não de uma hora pra outra????
3- O FrontPage tem este recurso? Sem precisar mexer com códigos???? Se sim como usa-lo?
Grato pela atenção!
André
0 user(s) are reading this topic
0 membro(s), 0 visitante(s) e 0 membros anônimo(s)