rubinhobarrichelo 0 Postado Outubro 15, 2009 Share Postado Outubro 15, 2009 Como fazer sua Frame?Quem já se arriscou a fazer algum arquivo HTML, pode ter se deparado com a necessidade de criar alguns frames (ou molduras, como preferir) para melhorar e organizar os elementos que serão adicionados a ela. Nesse tutorial veremos como fazer frames via código-fonte.Por quê hoje em dia, com tantos editores HTML, devemos saber como escrever um código fonte ?!? Pois é necessário ter uma noção do assunto pois nem todos os editores de HTML podem fazer frames da maneira que você deseja eusualmente você tem que intervir no código para que fique da maneira desejada. Para isso vamos precisar de um editor de texto qualquer, de preferência o Notepad (Bloco de notas), já que não iremos utilizar formatação de texto e nenhum outro recurso que oferece os editores de texto mais poderosos. Então vamos começar com uma introdução sobre frames, seus principais elementos e logo depois vamos à prática.Um frame é composto de dois elementos principais: um conjunto de frames e frames individuais. Um conjunto de frames é uma página HTML que contém informações sobre como será a disposição dos frames na tela e seus respectivos arquivos, além de outros atributos. Nesta página HTML não vão existir as tags (marcações) <body>, seu par </body> e outras que normalmente utilizamos em documentos HTML. Ao invés disso, para indicarmos o início e fim desse tipo de página utilizamos as tags <frameset> e seu par </frameset>. Uma página HTML que contém um conjunto de frames não é exibida no navegador: ela apenas armazena informações de como vão ser exibidos os frames na página. Os frames individuais são páginas HTML normais, onde podemos utilizar qualquer tag que conhecemos para esse fim.Não podemos esquecer que a página inicial do site, isso se você quiser que a página inicial tenha frames, deve ser a página HTML que contém o conjunto de frames, pois nela está contida a informação de como será a disposição de frames na tela.Antes de começarmos a fazer uma página utilizando frames, devemos imaginar a funcionalidade da distribuição de frames pela página e o conteúdo de cada um. Temos que elaborar um esquema para depois podermos executá-lo. Vamos fazer alguns exemplos de frames, os mais usados, se você quiser inovar e fazer um diferente, não se preocupe, quando acabarmos de fazer estes exemplos você terá entendido a lógica dos frames e poderá criar seus frames personalizados. Então mãos à obra!!!1° - Frame básico Agora vamos fazer um frame bem simples, como vemos na figura abaixo, um frame com 2 colunas. Muito utilizado quando queremos colocar uma barra vertical de menu. No frame direito temos uma barra de menu e no esquerdo a página de apresentação do site.Como já decidimos a arrumação dos frames, podemos fazer então a página HTML que conterá o conjunto de frames. Vamos chamá-la de index.htm.No Bloco de notas vamos abrir um arquivo novo e salvá-lo como index.htm, lembrando que na caixa de diálogo Salvar como devemos apontar no drop down Salvar como tipo a opção todos os arquivos, para que assim ele aceite a extensão .HTM e não salve este documento como um texto e sim como um documento HTML. Outra opção que temos para que o Bloco de notas salve o documento de texto em formato HTML é um pouco mais simples que a anterior pois basta colocar na caixa Nome do arquivo na caixa de diálogo Salvar como o nome do arquivo entre aspas (ex.: se quisermos que o nome do arquivo seja arquivo1.htm, devemos colocar, na caixa Nome do arquivo, "arquivo1.htm") pois desta maneira o Notepad salvará este arquivo com a extensão HTML, nos deixando livres de nos preocupar com outros detalhes.Com o arquivo salvo, vamos escrever o conteúdo do mesmo. O código fonte, ou melhor, o conteúdo desde arquivo deve ser como o apresentado abaixo:Veremos o que faz cada tag citada acima:<head><title> - Serve para colocarmos um texto na barra de título do navegador, geralmente o nome do site, que nesse caso é Frames passo a passo. As tags de término </title></head> indicam que terminamos de trabalhar com as referidas tags.<frameset cols="20%,*"> - A tag frameset indica que vamos começar a definir como estarão posicionados os frames, se em linhas (rows) ou colunas (cols), e qual tamanho cada um irá ocupar em relação à tela. São atributos desta tag:cols (<frameset cols="valor1, valor2,...">) e rows (<frameset rows="valor1, valor2,...">). Estes atributos designam se os frames serão em colunas ou linhas, respectivamente. Valor1, valor2, etc, são os valores que definem quanto da tela cada frame vai ocupar. Esses valores podem ser em pixels ou em porcentagem. Quando especificamos valores em pixels, é realmente com esse valor que cada frame vai se apresentar, não importando se a janela está restaurada ou maximizada. Quando especificamos valores em porcentagem, cada frame vai ser exibido com a porcentagem escolhida, se ajustando sempre ao tamanho da janela do navegador estando ele maximizado ou restaurado. No exemplo foi utilizado valor em porcentagem, sendo que o segundo valor em * indica que o que sobrar do total (que é sempre 100%) vai ser utilizado pelo segundo frame. Vale lembrar que podemos colocar quantos frames quisermos tanto em linhas como em colunas, lembrando também de especificar o valor que cada um vai ocupar na tela.<frame src="menu.htm" name="menu"> e <frame src="inicial.htm" name="principal"> - Utilizamos a tag frame para especificarmos quais serão os documentos que irão compor os frames, portanto, existirão tantas tags frame quantos frames tiverem sido especificados no frameset. No nosso exemplo, definimos 2 frames em colunas, uma com 20% de largura da tela e outra com 80% (ou seja, juntos somam 100% da tela). Como definimos dois frames então devemos colocar duas tags frame. Essa tag tem os atributos src e name, e sua sintaxe é <frame src="url" name="nome_da_janela"> , onde url é o nome do arquivo ou site externo o qual queremos que seja exibido no referido frame e nome_da_janela é um nome qualquer para ser associado a esse frame. Esse segundo atributo (name) é opcional, sendo utilizado quando o frame for o destino de um link em outro documento. Por exemplo, podemos fazer com que o conteúdo de um link do primeiro frame, quando acionado, seja exibido no segundo frame (colocando no código do link o atributo target="nome_da_janela", com a seguinte sintaxe: <a href="url" target="nome_da_janela>texto do link</a>). Uma observação importante: a tag frame não necessita de uma tag de finalização (</frame>) e aceita outros atributos também, mas veremos isso mais adiante.Agora que já especificamos tudo, podemos colocar a tag de fechamento </frameset> e podemos encerrar o documento com a tag </html>. Com isso, já montamos o esqueleto do conjunto de frames. Falta somente criar os documentos que vão constituir cada frame, que no exemplo seriam menu.htm e inicial.htm. Não podemos esquecer que os três documentos devem ser salvos no mesmo diretório (pasta), pois o caminho indicado no atributo src da tag frame foi o diretório corrente. Se algum deles não estiver no diretório corrente devemos especificar o caminho no atributo citado, senão o HTML de conjunto de frames não poderá exibi-los corretamente, uma vez que desconhece o local onde se encontra o arquivo que irá preencher o frame. Para ver o resultado devemos executar o arquivo index.htm, pois somente assim iremos visualizar o documento utilizando frames.Agora que já entendemos um pouco mais sobre frames e já conhecemos sua estrutura básica, vamos conhecer mais a fundo seus atributos. 2° - Tags e seus atributos 2.1. frameset: Aceita os atributos rows e cols, entre outros. Internamente (entre sua abertura - <frameset> - e fechamento -</frameset> -, podem aparecer outros frameset, frame e noframes.2.1.1. rows e cols - Cria frames divididos em linhas ou colunas, como já foi explicado anteriormente.2.1.2. frameborder="yes/no" - Atributo para especificar se será exibida a borda entre os frames ou não. É um atributo opcional. O padrão é yes, por isso se o atributo frameborder não vier definido, o navegador exibirá a borda.2.1.3. framespacing="valor" - Atributo que especifica quanto afastado um frame ficará do outro. Como o que é utilizado para a separação dos frames é a borda, este atributo é utilizado para definir a largura dela. Será utilizado este valor mesmo que a borda não esteja sendo exibida, assim sendo, o que vamos visualizar será realmente um espaço (que foi especificado) entre os frames. Este atributo é opcional.Tags que o frameset aceita internamente:2.1.4. frameset - Quando queremos fazer um aninhado de frames, ou seja, um frame interno a outro frame, podemos colocar outros framesets. Por exemplo: queremos fazer um primeiro frameset com duas linhas e queremos subdividir a segunda linha em três frames. Para isso devemos criar um frameset com duas linhas (ex: <frameset rows="40%, 60%">), e logo após especificarmos qual documento será exibido na primeira linha (ex.: <frame src="titulo.htm">). Como queremos fazer uma outra divisão de frames na segunda linha, devemos criar um frameset especificando isso (ex.: <frameset cols="25%, 30%,45%">) e após especificarmos os documentos que preencherão esse três frames (ex.: <frame src="col1.htm"> <frame src="col2.htm"> <frame src="col3.htm">). Como abrimos dois frameset devemos fechá-lo também duas vezes. Em suma, o código fonte ficará assim:2.1.5. frame - Vide item 2.2. frame (a seguir).2.1.6. noframes - Sintaxe: <noframes>texto informativo</noframes> - Esta tag é utilizada quando queremos colocar uma mensagem para que o usuário (navegante) de sua futura página possa ler, se o navegador deste não suportar frames. Serve para impedir que o visitante de sua página fique esperando aparecer o conteúdo desta e fique sabendo o porque de não estar conseguindo visualizar a página.2.2. frame: Aceita seis atributos. São eles:2.2.1. src="url" - Neste atributo especificamos o local do arquivo que vai preencher o frame. Se o local for o diretório corrente, basta colocar o nome do arquivo e extensão. Agora, se o local for diferente do diretório corrente, devemos informar nesse atributo o caminho para chegar a esse arquivo. Por exemplo, se o HTML que contém o conjunto de frames estiver na raiz (C:) e os outros estiverem no diretório pages (ligado primariamente à raiz), o caminho dos arquivos que estiverem neste diretório seria pages/arquivo.extensão.2.2.2. name="nome_da_janela" - Este atributo, como já foi anteriormente citado, é opcional, e utilizamos quando o frame for o destino de um link em outro documento.2.2.3. marginwidth="valor" - Atributo que controla as margens direita e esquerda de cada frame, ou seja, a distância entre o conteúdo da página e as margens da janela. Este atributo é opcional, e, se não vier definido, o navegador usará o seu padrão para definir essas margens em cada frame.2.2.4. marginheight="valor" - Tem funcionamento idêntico à tag anterior, só que determina as margens superior e inferior. Como o anterior, também é um atributo opcional.2.2.5. scrolling="yes/no/auto" - Atributo que define se um frame possuirá barra de rolagem ou não. Se for definido como yes, o frame possuirá barra de rolagem visível. Caso definido como no, não haverá barra de rolagem, nem que seja necessário. E se for definido como auto o navegador que decidirá a necessidade da exibição da barra de rolagem. Este é um atributo opcional, e se não vier definido, o navegador usará o padrão, que é auto, e exibirá a barra de rolagem quando achar necessário.2.2.6. noresize - Este atributo é utilizado para impedir que o usuário (visitante) da página altere o tamanho do frame, arrastando sua borda. O padrão é que todos os frames possam ter seu tamanho redimensionado, e inserindo esse atributo você impede que isso aconteça. Esse atributo não possui valor associado e é opcional. 3° - Aninhado de frames Veremos agora como fazer um aninhado de frames, ou seja, frames dentro de frames. Vamos construir um conjunto de frames com a seguinte disposição: um frame horizontal superior e um frame horizontal inferior dividido em dois outros frames verticais, esquerdo e direito, respectivamente. A visualização deste conjunto de frames seria a seguinte:E o conteúdo do arquivo HTML do conjunto de frames seria (o nome desse arquivo será exemplo2.htm):Para fazer variações com este tipo de frames é só partir da lógica do princípio acima, não esquecendo de usar a tag de fechamento quando a tag a possuir e também prestando muita atenção na escrita das tags para não errar ou trocar nenhuma letra, pois esses são os erros mais freqüentes que observamos na construção de frames em linguagem HTML. Créditos: Omnia Vincit Link para o comentário https://xtibia.com/forum/topic/121835-como-criar-sua-frame/ Compartilhar em outros sites More sharing options...
Henrique Moura 193 Postado Outubro 15, 2009 Share Postado Outubro 15, 2009 Não entendo o por quê de postar nesta seção, aqui é relacionado á otserv. E isso para mim é coisa de informática, acho que a seção mais apropiada seria Programação HTML. Abraços. Link para o comentário https://xtibia.com/forum/topic/121835-como-criar-sua-frame/#findComment-802498 Compartilhar em outros sites More sharing options...
rubinhobarrichelo 0 Postado Outubro 15, 2009 Autor Share Postado Outubro 15, 2009 (editado) Isto concerteza é na sessão de html, mais postei aqui pois é um tutorial de html, para ver se a galera gosta, se ela gostar, eu irei mover o tutorial. Sei que não precisa mais se a galera não gostar, eu nem aprovo, pra mim não faiz sentido deixar lá na sessão. Abraço. Editado Outubro 15, 2009 por RubinhoBarrichelo Link para o comentário https://xtibia.com/forum/topic/121835-como-criar-sua-frame/#findComment-802570 Compartilhar em outros sites More sharing options...
\Mattheus ~* 7 Postado Outubro 15, 2009 Share Postado Outubro 15, 2009 Seção certa ? Otímo Tópico, tudo organizado com Screen ainda melhor Abraços. Link para o comentário https://xtibia.com/forum/topic/121835-como-criar-sua-frame/#findComment-802608 Compartilhar em outros sites More sharing options...
Kydrai 146 Postado Outubro 15, 2009 Share Postado Outubro 15, 2009 (editado) Os frames estão ficando cada vez mais inúteis com o tempo e inclusive são desaconselhados pela w3c. O uso de frames trazem algumas desvantagens, por isso muitas vezes nem compensa usá-los. Mesmo assim ta muito bom o tutorial, acho que ta completo. Editado Outubro 15, 2009 por kydrai Link para o comentário https://xtibia.com/forum/topic/121835-como-criar-sua-frame/#findComment-802626 Compartilhar em outros sites More sharing options...
Posts Recomendados