Gente se vocês seguirem esse tutorial direitinho vocês vão conseguir, é grande, mas vale a pena ler tudo porque no final com certeza você vai ter entendido como fazer o iframe ^_~. Espero que gostem...
Tutorial Iframe
Pra se aplicar um iFrame, as tags são <*iframe> , básicamente.
(Sem os "*"!!!)
Mas esse código tah vazio! Onde fica minha página? Pra onde vão as outras? O_o
Vamos construir o código...
Primeiramente!
Na minha idéia, o iFrame tem que estar dentro de uma div (layer, camada). Primeiramente você tem que criar uma div onde você quer que as páginas vão aparecer.
Note: O quadro Principal é onde as páginas vão aparecer. Esqueça das páginas seguintes, pense só na página inicial. Você tem lah os links, por exemplo: For You, WWW e Créditos. Cada vez que clicar em um deles, vai ser lá dentro que as páginas vão aparecer.
Tah bom, já entendi o que você tá querendo dizer! *taca tomate* vai logo!
u__u' tah eu vou logo. xD
Tag do iFrame (você vai configurar umas coisas)
<*iframe id=meuframe name="frameprincipal" src="coloque aqui a página que você vai querer aparecer dentro do iframe (e não essa do iframe, por favor =P)" frameborder="no" width="500" height="500" scrolling="Yes" marginwidth="0" marginheight="0"> (Sem os "*" por favor ein!)
Olha só que código bonitinho...
Observe onde tá 'Name' aih na tag. Esse é o local pra colocar o nome do seu iFrame principal. Por exemplo, você tem um cachorro. Se você chamar ele de 'Cicrano' ele num vai atender. Mas ele tem um nome certo. O nome dele é 'Fulano' e ele só vai até você se você o chamar pelo nome, e pelo nome certo. Com o iFrame é a mesma coisa. Você vai precisar identificá-lo pra ele funcionar. Mas por favor, nesse caso não vão colocar o nome, por exemplo, 'Josefino' no iFrame... xD *vôa mais um tomate* Taaah parei! Agora é sério. hehe x)~
Pro iframe principal, você pode dar o nome de 'main' ou 'principalframe' ou igual esse citado acima, ou tanto faz, escolha um a seu gosto. Vai ser por esse nome que as páginas que virão vão localizá-lo. Isso vale pra 1 iFrame só ou pra mais.
Se for pra mais:
Tem lá o Menu 1, Menu 2 e Conteúdo.
O nome do menu 1 é 'menu1frame', o nome do menu 2 é 'menu2frame' e o nome dos Conteúdos é 'conteudoframe'. Se você quer que o link do menu 1 abra no menu 2 e não na janela do conteúdo, coloque como destino 'menu2frame'. MAS eu não quero enrolar vocês. Esse do destino das páginas eu vou falar daqui a pouco. Mas é pra vocês irem pegando a manha, como já não pegaram antes.
Já falei muito no nome. E aquele 'src'? Bom, aí vocês sabem, é a página que vocês querem que abra inicialmente dentro do iFrame.
frameborder=no: Tira aquela borda feia que fica em volta do iFrame, aí fica bonitinho. Hehe.
width e height: Agora vamos falar da div que você criou, que tá carregando o iFrame. Essa div criada terá de ter as mesmas proporções que você quer que o iFrame tenha. Ela tem que estar no lugar certo e, com a largura e altura certa.
Exemplo: Colocou a div lá, ajustou no lugar certo e colocou o tamanho 500x500. O iframe deverá ter, então, o mesmo tamanho.
Lembrando: Esse é o jeito que eu faço!
width = largura
height = altura
Scrolling="Yes" se vai ou não ter barra de rolagem no iFrame, pra rolar ou não as páginas que virão. O comum é deixar no 'Yes', mas se por algum motivo for melhor tirar a barra, deixa "No" aí no atributo. (Mas o 'No' só some com a barra, pode da mesma forma rolar pela página interior com o scroll do mouse).
Se houver mais de 1 iFrame, faça mais divs e configure ao gosto, exatamente como eu falei aí, da mesma forma. Não esqueça de dar nomes diferentes pra cada um.
As Páginas que aparecerão Dentro do iFrame
Já arrumamos o iFrame. Agora vamos falar das páginas interiores.
Vou montar um exemplo:
Eu tenho um site. Ele tem um menu com 4 links: Eu, Você, Nós, Todos
E tem o iFrame, já configurado. Dei o nome de 'framenovo'.
Acabei de construir a página 'Eu'. Salvei, dei o nome de 'euu.html'.
Linkando - a tag do link
Agora vou colocar um link onde tá lá 'Eu', no menu.
Selecionei o local, e coloquei <*a href="euu.html" target="iframe"*> não vai funcionar. (E se vc colocar os "*" ai que num funciona mesmo!!!)
Vai abrir numa página nova.
Como eu corrijo isso? Eu fiz o iFrame do conteúdo, eu quero que abra nesse local!
Aah, então tá bom!
Corrija target="iframe" e ao invés de 'iframe', coloque o nome do iframe que você quer que abra a página 'euu'!
O meu iframe principal, que eu quero que abra o conteúdo, se chama 'framenovo', lembram?
Então fica: target="framenovo".
PS: Se vocês não colocarem mais de 1 iFrame na página e qualquer link for abrir em um único, coloquem entre o e o a seguinte tag: (coloquei 'iframenovo' por causa do meu exemplo aqui). Assim, todos os links Só abrirão nele e, não tem necessidade de colocar target="framenovo" em Todos os links que você criar. Aí só fica, por exemplo: <*a href="todos.html"*> e o 'Base Target' no que se encarrega de direcionar... Bem simples!
Massss se você tiver mais que 1 iFrame, recomendo colocar a direção em cada link separadamente, pra abrir cada link em seu devido local.
Outro exemplo: Se eu tiver um site com 2 menus e o conteúdo... e eu quero que o link 'Você' apareça no menu 2, você vai colocar o nome que você deu pra esse segundo iFrame. Bom, isso já foi dito então lembrem-se! Assim, poderão fazer 100 iFrames em uma página só que vocês não se perdem (caramba, mas nunca vão exagerar e colocar 100 iFrames numa página, tá? *vôa uma bolinha de papel* Hahahaha XD tudo bem.
Bom... As páginas em si não precisam ter nenhuma tag referente ao iframe, somente o link das mesmas. A única coisa é que nessa página que vai abrir quando clicar no link, você não vai ficar fazendo layouts e imgs de topo extravagantes, somente o conteúdo, acho eu. Em uma página com iFrames, é só importante Meeesmo o design de fora, inicial, da página que vai carregar os iFrames. As páginas de dentro podem ser modestas. =)
iFrames em Blogs
Exemplo fácil (e fictício, hehe): 'Eu tinha um blog simples, básico, sem iframes. www.blablablog.blogspot.com. Mas comecei a fazer umas coisinhas nos editores de imagens e quero passar pro pessoal. Vou usar iFrames agora.
Você fez um blog-site. Você quer que o seu blog apareça de página inicial pra todos lerem suas novidades, mas também está disponibilizando gifs e plaquinhas. Porém, realmente o conteúdo-chave é seu blog. Você vai fazer uma template para o seu blog, com o iFrame e os links pros gifs e plaquinhas. OBSERVAÇÃO: Nesse template do iFrame, NÃO coloque suas tags do blog lá dentro do iFrame!!
Faça o local dos blog/links com o iFrame, coloque os links por aí.
Vamo lá. Esse iFrame vai ter o nome de 'frameblog'. Os links dos gifs/plakinhas terão como alvo (target) então o 'frameblog'.
Quando terminou tudo, coloque tudo em um OUTRO blog ou ainda: Hospede em um site. Mas não escolham aqueles que ficam com janelinhas dentro do site, é péssimo pra visualizar!
O Blog e suas tags
Faça agora uma página práticamente lisa, que será seu própriamente dito Blog. Nesta página você só vai colocar as tags de publicação / comentários / e mais algo, se quiserem.
Vá lá no seu blog principal, o que você sempre publicou. Pegue o código todo dessa página com as tags de publicação (a página 'lisa'), vá onde se troca o template e poste lá o código.
Então eu digitei www.blablablog.blogspot.com e abriu só aquela página... Lambida... Sem nada... Mas com todos meus posts lá.
Pra quê isso?
Bom, pra ele entrar no iFrame do seu blog-site! Este seu blog ficou sendo, agora, somente a página das news. Não vai precisar de layout porque o layout vai estar nesse outro blog/site hospedado que você fez! Entendeu? =)
Deixando um pouco de lado o blog que tem as tags de publicação,
e voltando para o layout principal com os links e o iFrame.
Tudo ok! Eu já mudei a template do meu 'blablablog' e agora soh tem as tags lá, num tem layout, só as news. E eu tb já criei um novo blog (ou hospedei o site) com o iFrame. Este blog, por sua vez, se chama www.blog_meu.blogspot.com. Como abro o blog 'blablablog', de cara lá dentro?
Esse iFrame, como dito, vai estar dentro de uma div... As tags desse iFrame do seu blog-site vão ser iguais, só mudando o seguinte (agora que você vai precisar abrir o seu blog dentro daí):
<*iframe id=meuframe name="frameprincipal" src="http://www.blablablog.blogspot.com" frameborder="no" width="400" height="200" scrolling="Yes" marginwidth="0" marginheight="0"> (Relembrando só mais uma vez o lance dos "*" ein!)
Observe o 'src'. Mudou!. No caso de abrir uma página de fora, e não um link interno, você deverá colocar a URL inteira.
Coloquei essa tag arrumadinha, salvei as alterações.
Vou lá em 'blog_meu.blogspot.com' e o que vejo? o blablablog.blogspot.com lá no iFrame!
Aaaah que emoçãaao !!! ;___;
E os links pros gifs e plaquinhas, você já sabe, coloquem como o target o nome do iFrame aí do seu site.
PS: Você configura as páginas internas (que vão aparecer dentro do iframe) com CSS... Coloque barra de rolagem colorida, efeito nos links... Efeitos em javascript... Isso pode fazer numa boa!
Lição Final - Transparência do iFrame
E aí, estão gostando e aprendendo né? *todos acenam com a cabeça que sim*
Puuxa, que bom! ^__^
Vamos lá, última parte então!
A página tá perfeita. Você fez o iframe, ele abriu, os links abrem, tudo no lugar certo, você vê o blog pelo iFrame, o CSS tá arrumado, nossa, que bom, minha página com iFrames foi feita e afinal não é difícil e tá linda!!
Mas... A minha página inicial geral tem um fundo colorido tão bonito! E o iFrame tá com o fundo brancão (ou semelhante)... Eu quero que apareça o fundo colorido no iFrame, pras páginas ficarem mais bonitas!
Tudo bem, mais fácil que andar pra frente. =)
Qual é a tag do iFrame messssmo??
<*iframe id=meuframe name="frameprincipal" src="página que vai aparecer dentro do iframe" frameborder="no" width="500" height="500" scrolling="Yes" marginwidth="0" marginheight="0"> (E o que não pertence a tag mesmoo!?? O "*" isso mesmooo!!! Tô gostando de ver ein!)
Aeeee!
Vamos incluir um atributo nessa tag!
Vamos incluir ela por último (nesse caso, depois de marginheight="0").
allowtransparency="true"
Allow transparency quer dizer 'permitir transparência'.
Então a tag vai ficar:
<*iframe id=meuframe name="frameprincipal" src="página que vai aparecer dentro do iframe" frameborder="no" width="500" height="500" scrolling="Yes" marginwidth="0" marginheight="0" allowtransparency="true">
Mas... Espera aí, a página que vai abrir ainda num vai mostrar o fundo transparente. 'Neutralizamos' o iFrame, agora vamos neutralizar as páginas que abrirão nele (todas que abrirão nele, incluindo blogs, terão que ter o seguinte parâmetro se quiserem que o fundo fique transparente).
Pro 'allowtransparency' funcionar, tem que ter um atributo que 'responda' a ele.
style="background-color:transparent"
E onde vai isso? Tudo bem, sei que é na página que abrirá no iFrame, mas em qual tag?
Na tag !
E não 'abaixo' dela. É 'dentro' dela, mesmo!
Uma tag que abre o body, geralmente é assim:
Pois todos sabem que é entre e que tudo acontece. =P
Coloquem o atributo logo após da palavra 'body'. Vai ficar assim:
PS: Não coloque imagem ou cor de fundo nesses casos, se quiser realmente deixar o iFrame transparente. Porque não vai aparecer.
E... 'Voilá'!! Quando você abrir o site e navegar pelas seções, o fundo colorido do site (lembram-se do exemplo?) vai estar aparecendo!
Tutorial de Iframe por Cat Girl
« back || ^ top || * refresh || next »