Jump to content


Photo

Tutorial De Camadas (divs)


  • Faça o login para participar
70 replies to this topic

#1 Guilherme Blanco

Guilherme Blanco

    Loading...

  • Conselheiros
  • 891 posts
  • Sexo:Masculino
  • Localidade:São Carlos - SP/Brasil
  • Interesses:Programação Web e minha namorada (Maria Camila).

Posted 21/12/2002, 14:28

Quero iniciar este tutorial falando primeiramente o que é suporte a W3C.

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.
<script language="WebFórum">
// Dados:
Nome("Guilherme Blanco");
Localidade("São Carlos - SP/Brasil");
Cargo("Manutenção");
</script>

#2 Loukinho157

Loukinho157
  • Visitantes

Posted 06/04/2003, 12:26

Ae véio esse tutorial me ajudou pra xxxxx, valeu mesmo :ok:

#3 Towd

Towd
  • Visitantes

Posted 07/06/2003, 03:49

ai esse tuto é muito 10

#4 nick171

nick171

    <? if => erro ?>

  • Usuários
  • 612 posts
  • Sexo:Não informado

Posted 07/06/2003, 04:00

Nossa cara Show este tuto ai hein, mas Layers (Camadas) é CSS, mas ai parabens belo tutorial
Nícolas Vieira Rossett


"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 Chinello Cybernético

Chinello Cybernético

    Simplesmente "Chinello"

  • Usuários
  • 1892 posts
  • Sexo:Masculino
  • Localidade:Canoas - RS

Posted 07/06/2003, 23:58

Nossa cara Show este tuto ai hein, mas Layers (Camadas) é CSS, mas ai parabens belo tutorial

CSS?? Né naum.. É HTML pombas.. Vai discutir com o GB??? :lol:

Mas é HTML mesmo.. Só que a maioria dos atributos que se usam nele são em CSS e/ou JavaScript.. ;)

Fui.. :P
Diego Sampaio - kroW - PHP Framework > http://chinelloweb.net/
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|

cRazYY|mAN|
  • Visitantes

Posted 10/06/2003, 17:02

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

#7 lucas souza

lucas souza
  • Visitantes

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. :ph34r:

#8 Visitante - anjinhow

Visitante - anjinhow
  • Visitantes

Posted 22/06/2003, 20:08

Oi como ficaria o codigo caso eu colocase um botão fechar para ele fechar a layer quando clicar nele, agradeço desde já

#9 Chinello Cybernético

Chinello Cybernético

    Simplesmente "Chinello"

  • Usuários
  • 1892 posts
  • Sexo:Masculino
  • Localidade:Canoas - RS

Posted 22/06/2003, 21:51

Oi como ficaria o codigo caso eu colocase um botão fechar para ele fechar a layer quando clicar nele, agradeço desde já

Já tem um tutorial falando sobre isso na seção de JavaScript..

Segue o link:

Mostrando/Escondendo camadas, Tutorial completo para browsers W3C

;)

Fui.. :P
Diego Sampaio - kroW - PHP Framework > http://chinelloweb.net/
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 E-magine

E-magine

    Turista

  • Usuários
  • 53 posts
  • Sexo:Não informado
  • Localidade:Belém-PA

Posted 18/09/2003, 16:48

È camada que estão passando a utilizar agora em publicidade (como na uol, yahoo... etc ) ??? As publicidades estão mais chamativas com esse tipo agora...


Como movimentar uma camada ?

#11 Guilherme Blanco

Guilherme Blanco

    Loading...

  • Conselheiros
  • 891 posts
  • Sexo:Masculino
  • Localidade:São Carlos - SP/Brasil
  • Interesses:Programação Web e minha namorada (Maria Camila).

Posted 22/09/2003, 11:49

Você tem que ir setando via JS a posição a cada X milisegundos.

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,
<script language="WebFórum">
// Dados:
Nome("Guilherme Blanco");
Localidade("São Carlos - SP/Brasil");
Cargo("Manutenção");
</script>

#12 Wagner Bianchi

Wagner Bianchi

    SQL MAGAZINE

  • Usuários
  • 323 posts
  • Sexo:Não informado
  • Localidade:Belo Horizonte/MG
  • Interesses:MySQL, PHP, XML, JAVA SCRIPT, DHTML, LINUX, C, C++

Posted 25/09/2003, 12:21

Olá,

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? :wacko:

Aguardo resposta. . .


Obrigado.

Wagner Bianchi (y)
<?php

$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 Guilherme Blanco

Guilherme Blanco

    Loading...

  • Conselheiros
  • 891 posts
  • Sexo:Masculino
  • Localidade:São Carlos - SP/Brasil
  • Interesses:Programação Web e minha namorada (Maria Camila).

Posted 28/09/2003, 16:21

Simples... path significa caminho entre pastas até o local onde você quer...

exemplo:

system/img/

[]s,
<script language="WebFórum">
// Dados:
Nome("Guilherme Blanco");
Localidade("São Carlos - SP/Brasil");
Cargo("Manutenção");
</script>

#14 Wagner Bianchi

Wagner Bianchi

    SQL MAGAZINE

  • Usuários
  • 323 posts
  • Sexo:Não informado
  • Localidade:Belo Horizonte/MG
  • Interesses:MySQL, PHP, XML, JAVA SCRIPT, DHTML, LINUX, C, C++

Posted 29/09/2003, 08:26

Agora sim, valeu mesmo! B)



Wagner Bianchi (y)
<?php

$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

  • Visitantes

Posted 28/10/2003, 14:57

Olá, super legal este artigo, contudo tenho 4 dúvidas!

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)

IPB Skin By Virteq