Como inserir um iframe em HTML: exemplo de uso. Como criar uma página com frames Usando frames em páginas da web

Pagina inicial » Acessórios

Como inserir um iframe em HTML: exemplo de uso. Como criar uma página com frames Usando frames em páginas da web

10.10.2023

Usando frames, você pode exibir vários documentos HTML separados em uma janela do navegador.

Quadros HTML

Observação: Os frames são atualmente considerados uma tecnologia obsoleta e não serão suportados em HTML5 (isso se aplica apenas a frames regulares; os frames de string, discutidos posteriormente neste capítulo, não são considerados obsoletos). Não use molduras normais em seus projetos!

Uma janela do navegador pode exibir várias páginas da web, que neste caso serão chamadas quadros.

Usando tags HTML Você pode descrever como os frames serão posicionados na janela do navegador.

Marcação descreve um único quadro. Em seu atributo fonte Deve ser indicado o endereço do documento que será exibido neste quadro.

Tamanho do quadro

Os tamanhos dos quadros são definidos usando atributos de tag . As dimensões podem ser especificadas em pixels (px) e porcentagens (%).

Usando atributo linhas Você pode definir a altura do quadro. Os tamanhos dos quadros individuais devem ser separados por vírgula.

Usando atributo colunas Você pode definir a largura de um quadro individual.

Observação: O quadro por padrão possui uma borda visível, o que significa que o usuário pode redimensioná-lo arrastando a borda. Para evitar o arrastamento da borda você pode adicionar um atributo noresize com o valor "noresize" à tag .

E se o navegador do usuário não suportar frames?

Se o navegador do usuário não suportar frames, você deverá usar a tag

Observação: Ao usar a tag noframe, você deve especificar a tag body conforme mostrado no exemplo acima.

Quadros de cordas

Usando uma etiqueta </b> Você pode inserir um quadro em qualquer lugar de um documento HTML normal.</p> <p>Em qualquer editor de texto, crie um novo arquivo de texto.</p> <p>Insira as tags principais, sem contar as tags <body></body>, que não são usados no arquivo que descreve os quadros. Em tags <title></title> indicar o título - Empresa SD:</p><p> <html> <head> <title>Empresa SD</title> </head> </html> </p><p>Em vez de tags <body></body> no arquivo que descreve os frames, um par de tags é usado <frameset></frameset> com os atributos rows ou cols, que determinam como a tela é dividida - horizontal ou verticalmente. Como valores desses atributos, pode-se utilizar o valor numérico da altura ou largura do quadro em pixels ou como uma porcentagem de 1% a 100%. Por exemplo, se você deseja dividir a janela do navegador horizontalmente em dois quadros de tamanhos iguais, o código HTML deve ser assim:</p> <p><frameset rows="50%, 50%"></p> <p>Observação: os valores dos atributos são separados por vírgula.</p> <h2>Divisão vertical do quadro</h2> <p>Para dividir verticalmente a janela do navegador em dois quadros de 200 e 600 pixels de largura, você deve escrever:</p> <p><frameset cols="200.600"></p> <p>Mas a largura e a altura reais da janela do quadro dependem da resolução atual do monitor. Portanto, se o usuário tiver uma resolução configurada para, por exemplo, 1024 x 768 pixels, ou seja, a largura da tela é de 1024 pixels, então parte da tela poderá ficar em branco. Portanto, recomenda-se definir os tamanhos dos quadros como porcentagens para que sua soma seja igual a 100%. Se você ainda precisar especificar um tamanho fixo em pixels para uma das janelas, então não será possível especificar o tamanho da outra janela, substituindo seu valor pelo logotipo *. Neste caso, o próprio navegador selecionará o tamanho adequado para a segunda janela.</p> <p>Vamos fazer dois quadros verticais para exibir nosso site. Para o primeiro quadro em que será exibido o menu, definiremos uma largura fixa de 160 pixels, e deixaremos o navegador encontrar o tamanho do segundo, substituindo-o por um asterisco *.</p> <p>No editor de texto, insira uma linha em branco após a tag de fechamento</head> e digite o seguinte código:</p> <p><frameset cols="160, *"></p> <p></frameset></p> <p>Desta forma, especificamos que a janela do navegador deve ser dividida verticalmente em dois quadros. Tags únicas são usadas para descrever cada quadro individualmente <frame>, que deve estar dentro do elemento <frameset>…</frameset>. Um atributo de tag essencial <frame>é src, seu valor é o endereço do documento que deve estar neste frame. Como o primeiro quadro conterá o arquivo menu.html, esta tag deve ser escrita assim:</p> <p><frame src="menu.html"></p> <p>Insira uma linha em branco após a tag de abertura <frameset>e insira a tag designada.</p> <p>O arquivo other.html deve ser carregado no segundo frame, então a segunda tag <frame>será assim:</p> <p><frame src="other.html"></p> <h2>Como fazer um menu usando frames</h2> <p>Para que todas as demais páginas do site WEB - list.html e outras que vierem a ser criadas - também possam ser carregadas no segundo frame, é necessário utilizar o atributo name para atribuir um nome a esse frame, que, sendo designado no links de qualquer documento como o valor do atributo target determinará em qual quadro o documento deve ser carregado. Lembramos que no caso geral, ao seguir um link, um novo documento se abre na mesma janela. Especificamente, para que ao seguir os links do nosso menu, as páginas abram não no primeiro quadro em que o menu está localizado, mas no segundo, utilizamos em experiências anteriores em links de menu o atributo target com o valor "frame" : target="frame", onde "frame" é o nome do segundo quadro. E agora o nome “frame” deve ser atribuído ao segundo quadro, no qual o arquivo other.html deve ser expandido. Porque a segunda etiqueta <frame>na forma final deve ser escrito assim:</p> <p><frame src="other.html" name="frame"></p> <p>Insira este código inserindo uma linha em branco antes da tag de fechamento</frameset>.</p> <h2>Montagem do quadro principal</h2> <p>Salve o arquivo na pasta WEB com o nome index.html.</p> <p>O nome index.html deve ser atribuído ao arquivo com a página principal de cada site WEB. Este arquivo específico é aberto por padrão ao acessar um nó WEB, a menos que um nome de arquivo diferente seja especificado. Em alguns sites da WEB, o nome da página principal pode ser index.htm, e index.html é exibido não como uma página, mas como uma pasta com nomes de arquivos. Isso precisa ser esclarecido com o administrador do site.</p> <p>Agora você pode ver a aparência dos quadros criados.</p> <p>Abra o arquivo index.html da pasta WEB do seu navegador. Você verá que a janela do visualizador está dividida verticalmente em dois quadros. O quadro esquerdo exibe o menu e o quadro direito exibe o arquivo other.html.</p> <p>Observe que cada quadro possui suas próprias barras de rolagem. Você pode cancelar a exibição conforme necessário. Para isso basta na tag <frame>especifique o atributo scrolling=no.</p> <p>Adicione o atributo scrolling=no à tag que descreve o primeiro quadro:</p> <p><frame src="menu.html" scrolling=no></p> <p>Veja bem, os frames são um meio conveniente de colocar informações em páginas da WEB. Mas ao usá-lo, não se deve perder o senso de proporção. Um número muito grande de janelas no display não melhora a percepção das informações. Não tenha mais de três frames no display e tente não usá-los desnecessariamente.</p> <h2>As principais desvantagens dos quadros</h2> <p>A principal desvantagem do uso de frames é que essa página não pode ser encontrada pelos mecanismos de pesquisa e você não receberá visitantes para essa página. Esta é a principal desvantagem. Os frames também sobrecarregam o poder de processamento do computador. Naturalmente, isso não é muito relevante em nossa época, mas é relevante para dispositivos móveis, onde a velocidade de desenho de páginas WEB ainda é difícil. Recordo que no final de 2010 a WEB era utilizada através de dispositivos móveis em cerca de 10% e este número cresce a cada ano.</p> <h2>Resultado</h2> <p>Assim, a primeira etapa do nosso trabalho está concluída - fizemos um site WEB a partir de duas páginas WEB. Agora, para que fique disponível para todos, ele precisa ser colocado na Internet em um dos servidores da World Wide WEB.</p> <h2>Como fazer uma página com frames</h2> <p>No FrontPage, os frames são chamados de frames. A maneira mais fácil é criar uma página com frames baseada em um dos modelos prontos disponíveis no programa FrontPage.</p> <p>Selecione o comando de menu Arquivo - Criar (Arquivo - Novo). Um painel de tarefas com a nova tarefa ativa aparecerá na parte direita da janela de trabalho do programa.</p> <p>Na seção Nova página do Painel de Tarefas, clique no link Mais modelos de página. A caixa de diálogo Modelos de página aparecerá no visor.</p> <p>Selecione a guia Páginas de quadros.</p> <p>Esta guia contém um conjunto de modelos para criar páginas com molduras. Ao selecionar um modelo, a visualização inicial da página é exibida à direita no campo Visualização e uma descrição do modelo é exibida no campo Descrição.</p> <p>Selecione um dos modelos, por exemplo Conteúdo, e clique em OK. Uma nova página com frames será criada de acordo com o modelo selecionado.</p> <p>Na parte inferior da guia new_page_1.htm recém-criada (new_page_1.htm), um botão adicional Sem quadro aparecerá. Ao clicar nele, veremos como a página ficará em um navegador que não suporta trabalhar com quadros. Por padrão, ali é colocado o texto da mensagem sobre a impossibilidade de exibição de frames.</p> <p>Quando um navegador carrega uma página com frames, ele lê as informações sobre os frames e depois carrega a página original em cada frame. Portanto, após criar uma página com molduras, é necessário definir as páginas originais das molduras.</p> <p>No modo de edição Design da visualização Página, os botões são mostrados em quadros vazios.</p> <p>Clique no botão Nova página em cada quadro. Novas páginas serão criadas dentro dos frames.</p> <p>Usando outro botão, Definir página inicial, você pode selecionar uma das páginas criadas anteriormente para o quadro como a inicial.</p> <p>Selecione o comando de menu Arquivo - Salvar (Arquivo - Salvar) para salvar novas páginas. As caixas de diálogo normais para salvar arquivos, Salvar como, aparecerão no visor, uma por uma, para cada página na qual você precisar especificar nomes de arquivos. Especifique, por exemplo, o nome LeftFrame para a página de origem do quadro esquerdo, o nome RightFrame para a página de origem do quadro direito e o nome FrameContainer para a própria página com quadros.</p> <p>Se você escolheu o modelo Conteúdo ao desenvolver uma página com frames, então ele já possui uma conexão estabelecida entre os frames: ativar um link colocado no frame esquerdo fará com que as páginas que o link mostra sejam carregadas no frame direito. Neste caso, o quadro direito é denominado quadro motivado (quadro alvo).</p> <p>Para verificar como funciona a conexão entre os frames, vamos colocar dois links de texto na página do frame esquerdo. Deixe um deles vincular, por exemplo, à página original do quadro direito, e o outro à página principal do site.</p> <p>Coloque o cursor de texto no início da página no quadro esquerdo e digite a frase Link para a página principal.</p> <p>Selecione a frase digitada usando o mouse ou teclado e selecione o comando do menu Inserir - Hiperlink. A caixa de diálogo Criar hiperlink aparece no display.</p> <p>Na lista de arquivos do site WEB, selecione o arquivo de índice da página inicial e clique em OK. A frase inserida será convertida em um link.</p> <p>Selecione a frase digitada usando o mouse ou teclado e clique no botão adicionar hiperlink na barra de ferramentas Padrão. A caixa de diálogo Criar hiperlink aparece no display.</p> <p>Na lista de arquivos do site WEB, selecione RightFrame e clique em OK. A frase inserida será convertida em um link.</p> <p>Mude para o modo de visualização clicando no botão Visualizar na parte inferior da guia FrameContainer.htm.</p> <p>Se necessário, você pode alterar o quadro motivado para um único link ou para todos os links do quadro atual.</p> <p>No modo de edição Design da visualização Página, clique com o botão direito em um dos links no quadro esquerdo e selecione Propriedades do hiperlink no menu de contexto que aparece. A caixa de diálogo Editar hiperlink aparece no visor.</p> <p>(Quadro alvo). A caixa de diálogo Quadro de destino aparece no visor.</p> <p>No campo Configuração de alvo, você pode especificar um quadro motivado ou selecionar uma das opções na lista Alvos comuns. O sinalizador Definir como padrão de página permite que você use um quadro motivado selecionado para todos os links em uma página onde nenhum outro é obviamente especificado.</p> <p>Clique em OK para fechar a caixa de diálogo Quadro de destino e clique em OK na caixa de diálogo Editar hiperlink.</p> <p>Embora os frames não contenham suas próprias partes visuais, a página com frames e os próprios frames possuem uma série de opções que permitem controlar sua exibição.</p> <p>Clique com o botão direito em qualquer lugar de um dos quadros e selecione Propriedades do quadro no menu de contexto que aparece. A caixa de diálogo Propriedades do quadro aparece no visor.</p> <p>O campo Nome indica o nome interno do quadro e também é usado ao selecionar um quadro motivado para um link. O campo Página inicial especifica a página exibida no quadro quando ele é carregado. No grupo Tamanho do quadro de partes de controle, você pode especificar a largura (Largura) e a altura (Altura) do quadro em relação aos quadros adjacentes (Relativo), em relação ao tamanho da janela do navegador em porcentagem (Porcentagem) ou um tamanho fixo em pixels (Pixels). No grupo Margens de partes de controle, são determinados os valores de recuo dos limites vertical (Largura) e horizontal (Altura) do quadro até o conteúdo dentro do quadro. Se o sinalizador Redimensionável no navegador estiver definido, um convidado do site poderá alterar o tamanho do quadro movendo o separador entre os quadros adjacentes com o mouse. Na lista suspensa Mostrar barras de rolagem, você pode definir o modo de exibição da barra de rolagem: se necessário, ou seja, quando a página não cabe completamente no quadro, nunca (Nunca) ou sempre (Sempre).</p> <p>Clique no botão Página de quadros. A caixa de diálogo Propriedades da página aparece com a guia Quadros aberta.</p> <p>O sinalizador Mostrar bordas determina se as bordas do quadro serão exibidas. Se o sinalizador estiver desmarcado, as faixas de separação entre os quadros não serão visíveis no navegador. No campo Espaçamento entre quadros, você define a largura dos limites que separam os quadros adjacentes.</p> <p>Clique em OK para fechar a caixa de diálogo Propriedades da página e, em seguida, clique em OK na caixa de diálogo Propriedades do quadro.</p> <p>Você pode adicionar novos quadros ou remover os existentes da página.</p> <p>No modo de edição de página, selecione um dos quadros clicando nele.</p> <p>Selecione o comando de menu Quadros - Dividir quadro</p> <p>(Molduras - Moldura Dividida). A caixa de diálogo Dividir quadro aparece no visor.</p> <p>Usando uma das opções, selecione a opção de divisão: Dividir em colunas ou Dividir em linhas.</p> <p>Clique OK. A área do quadro atual será dividida em duas partes e um novo quadro será adicionado à página.</p> <p>Um novo quadro também pode ser criado se, no modo de edição de página, você mover o separador de quadros com o mouse enquanto mantém pressionado o botão Ctrl.</p> <p>Para excluir um quadro, selecione-o clicando sobre ele com o mouse, e no menu do programa selecione o comando Quadros - Excluir Quadro. O quadro será excluído.</p> <p>Excluir um quadro não exclui a página exibida nele. O último quadro da página não pode ser excluído.</p> <p>Na lista suspensa Salvar como tipo, selecione Modelos do FrontPage.</p> <p>No campo de entrada Nome do arquivo, insira o nome do arquivo de modelo e clique no botão Salvar. A caixa de diálogo Salvar como modelo aparecerá no visor.</p> <p>No campo de entrada Título, especifique o título do template, que será exibido na lista de templates ao desenvolver uma nova página. No campo de entrada Descrição você pode descrever brevemente a finalidade e o tipo do modelo.</p> <p>Clique OK. O modelo será salvo.</p> <p>Agora você pode usar seu modelo ao desenvolver uma nova página com quadros selecionando-o na lista de modelos na caixa de diálogo Modelos de página. Se, ao salvar o template, as páginas originais foram instaladas em frames, então elas serão utilizadas por padrão para todas as frames feitas com base no template.</p> <p>Os frames são convenientes para navegar em um site da WEB ou em uma seção de um site da WEB. Uma lista de links na forma de texto ou imagens geralmente é colocada em um dos quadros, e as páginas são carregadas no outro quando os links do primeiro quadro são selecionados. Outra opção é implementar bordas e menus de navegação comuns, que já abordamos. Não é imediatamente recomendado o uso de frames e limites gerais - isso pode tornar a navegação no site confusa.</p> <p>Então, molduras... para que servem e quais os benefícios que proporcionam? Tentarei falar sobre isso neste capítulo e, claro, sobre como implementá-los e trabalhar com eles.</p> <p>Muitas vezes, ao criar um site, é necessário abrir vários documentos HTML ao mesmo tempo em uma janela do navegador... por isso foram criados frames para definir áreas de trabalho de cada documento. Além disso, os frames são uma boa ferramenta com a qual você pode fazer o layout da página; eles servem como uma “alternativa” válida ao método tabular de layout da página... Coloquei a palavra “alternativa” entre aspas porque é uma forma completamente diferente. de construir um site com suas próprias vantagens e desvantagens e é bastante difícil compará-lo com a construção do site até então familiar.. mas primeiro o mais importante..</p> <p>Vamos começar? Digamos que precisamos abrir três documentos HTML de uma vez em uma janela do navegador e organizá-los, por exemplo, desta forma:</p> <p>O que precisamos para isso? Para começar, é claro, precisamos criar três documentos HTML separados que abriremos em uma janela. Deixe o primeiro documento conter uma imagem gráfica e atuar como um logotipo, vamos chamá-lo de logotype.html, o segundo documento será. algum conteúdo.. vamos chamá-lo de menu .html, e o terceiro é um documento com muito texto. texto.html. Claro, você pode criar seus próprios nomes, assim como o conteúdo dos documentos, mas por enquanto é melhor copiar os meus... será mais conveniente para mim e para você.</p> <p>Portanto, existem três arquivos logotype.html, menu.html e text.html.. que precisamos colocar sob o mesmo teto, mas ainda não temos um teto..</p> <p>Escrevemos “telhado”, o documento principal ao qual conectaremos nossos arquivos. Como será o principal, damos-lhe o nome de index.html.</p> <p> <html> <br> <head> <br> <title>quadros</title> <br> </head> <br> <body> <br> </body> <br> </html></p> <p>Aqui está a estrutura do documento que nos é familiar, que mastigamos logo no início do nosso treinamento. Os Frames quebram os estereótipos existentes! A estrutura do quadro do documento é semelhante a esta:</p> <p> <html> <br> <head> <br> <title>quadros</title> <br> </head> <br><b><frameset> </b> <br><b></frameset> </b> <br> </html></p> <p>Sem etiqueta <b><body> </b> compensa a nova tag <b><frameset> </b>- instale uma moldura ou conjunto de molduras... com esse cara vamos realmente trabalhar mais.</p> <p>Marcação <b><frameset> </b> tem atributos <b>linhas</b> E <b>colunas</b>- esses atributos informam ao navegador como colocar frames na janela do navegador</p> <b>linhas</b>- horizontalmente <b>colunas</b>- verticalmente <br><br><img src='https://i1.wp.com/webremeslo.ru/graphics/win1.gif' width="100%" loading=lazy loading=lazy><p>No nosso caso, precisamos de colocação horizontal de quadros... então escrevemos assim:</p> <p> <html> <br> <head> <br> <title>quadros</title> <br> </head> <br> <frameset <b>linhas = "15%,15%,70%"</b>> <br> </frameset> <br> </html></p> <p>As porcentagens após o sinal de igual nada mais são do que os tamanhos de nossas janelas de quadro em uma grande janela do navegador, devemos colocar três janelas - portanto, também existem três valores separados por vírgulas; Lembre-se de como definimos os tamanhos das células para a tabela, o mesmo princípio se aplica aqui. Como no caso das células da tabela, os tamanhos dos quadros podem ser especificados como uma porcentagem da área total e em pixels.</p> <p>Aqui estão alguns exemplos de escrita: <br><b><frameset rows="15%,15%,70%"> </b>- esta entrada indica que haverá três janelas horizontais onde a última ocupará 70% da área da janela do navegador e as duas primeiras ocuparão 15%. <br><b><frameset cols ="200,240,200"> </b>- aqui estão três janelas localizadas verticalmente, cuja largura é indicada em pixels. <br><b><frameset rows="100,*,180"> </b>- tal entrada significa que a primeira e a terceira janelas terão largura de 100 e 180 pixels, respectivamente, e o segundo quadro ocupará toda a área restante.</p> <p>Terminamos a colocação dos documentos, agora só falta conectá-los e aproveitar o primeiro resultado.</p> <p>Marcação <b><frame> </b> e seu atributo <b>fonte</b> indicará ao navegador o caminho do documento html que deverá ser aberto no espaço destinado a ele. Temos três documentos separados logotype.html, menu.html e text.html, agora precisamos especificar um caminho para cada um, que é o que realmente fazemos. (Presumo que todos os quatro arquivos estejam na mesma pasta e os caminhos para eles tenham a notação mais simples, como: <b><frame src="logotype.html"> </b>)</p> <p>Arquivo index.html <br> <html> <br> <head> <br> <title>quadros</title> <br> </head> <br> <frameset rows="15%,15%,70%"> <br><b><frame src="logotype.html"> </b> <br><b><frame src="menu.html"> </b> <br><b><frame src="text.html"> </b> <br> </frameset> <br> </html> <br>Arquivo logotype.html <br> <html> <br> <head> <br> <title>quadros</title> <br> </head> <br> <body> <br> <img src='https://i0.wp.com/logotype.jpg' height="120" width="800" loading=lazy loading=lazy> <br> </body> <br> </html> <br>Arquivo menu.html <br> <html> <br> <head> <br> <title>quadros</title> <br> </head> <br> <body bgcolor="#e8e8e8" background="fon1.jpg"> <br> <font face="Monotype Corsiva" size="6"color="#ff0000">Cardápio:</font><br> <font face="Comic Sans MS" size="3"> <br>Sopa de champignon <br>Feijão na panela, estilo italiano <br>Salada de verão australiana <br> ... ... ... <br> </font> <br> </body> <br> </html> <br>Arquivo texto.html <br> <html> <br> <head> <br> <title>quadros</title> <br> </head> <br> <body bgcolor="#f5f5f5"> <br> <center><font face="Comic Sans MS" size="3">Sopa de champignon</font></center> <br> <br>muito texto.. <br> </body> <br> </html> <br></p> <p>Neste exemplo, postei todos os quatro documentos HTML onde index.html é o principal, e os outros três são páginas plug-ins, cada uma das quais, em princípio, pode funcionar de forma autônoma e conter qualquer coisa, imagens, tabelas, textos, links .. Eu fiz isso para lhe dar uma compreensão do princípio de trabalhar com frames. Em outros exemplos, vou postar apenas o arquivo head com frames (caso contrário todos eles ocupam muito espaço na página), e você sabe que tenho “em algum lugar lá fora” todos os outros arquivos contendo gráficos, textos, talvez seja algo senão.. bem, não fique atrás de mim, edite lentamente suas próprias páginas para o futuro site de treinamento.. Não sei sobre o que você vai escrever o seu, mas prometi ajudar uma garota a escrever um site dedicado para cozinhar ..)) então decidi, por assim dizer, mirar em dois coelhos com uma cajadada só .. a coelhinha e o site ..)) algo assim ..))</p> <p>No exemplo acima posicionamos todas as janelas horizontalmente, alterando o atributo <b>linhas</b> sobre <b>colunas</b> você pode organizá-los verticalmente. Mas e se você precisar colocar nossas janelas?</p> <br>assim?: ou assim?: ou até assim?: <br><br><img src='https://i1.wp.com/webremeslo.ru/graphics/win2.gif' width="100%" loading=lazy loading=lazy><p>Existe uma saída. Vejamos exemplos.</p> <p>Comecemos pelo primeiro caso... o que vemos? E vemos duas linhas, onde a segunda está dividida em duas colunas.</p> <p>E agora, em ordem:</p> <b><frameset rows="20%,80%"> </b> <i>- divida a janela do navegador em duas linhas</i><br><b><frame src="logotype.html"> </b><i>- carregue nosso logotipo na primeira linha</i><br><b><frameset cols="30%,70%"> </b><i>- e divida a segunda linha em duas colunas</i><br><b><frame src="menu.html"> </b> <i>- no primeiro haverá um menu</i><br><b><frame src="text.html"> </b><i>- e no segundo tem muito texto</i><br><b></frameset> </b> <i>- feche a tag de divisão da coluna</i><br><b></frameset> </b> <i>- feche a tag de divisão de linha</i><br><p>Em geral, é incorreto dizer colunas e linhas, já que os frames não têm nada a ver com tabelas além da semelhança visual, é correto dizer frames horizontais e verticais.. bem, estou dizendo desta forma para que fique; mais claro para você..</p> <p>Ok, vamos ver um exemplo:</p> <p> <html> <br> <head> <br> <title>quadros</title> <br> </head> <br> <frameset rows="15%,85%"> <br> <frame src="logotype.html"> <br> <frameset cols="20%,80%"> <br> <frame src="menu.html"> <br> <frame src="text.html"> <br> </frameset> <br> </frameset> <br> </html> <br></p> <p>No segundo caso, temos duas colunas em que a segunda está dividida em duas linhas, então escreveremos assim:</p> <b><frameset cols="30%,70%"> </b> <i>- divida a janela em duas colunas</i><br><b><frame src="menu.html"> </b> <i>- o primeiro conterá o conteúdo</i><br><b><frameset rows="20%,80%"> </b> <i>- e divida a segunda em duas linhas</i><br><b><frame src="logotype.html"> </b><i>- logotipo</i><br><b><frame src="text.html"> </b> <i>- e texto principal</i><br><b></frameset> </b> <i>- feche a divisão da linha</i><br><b></frameset> </b><i>- feche a divisão em colunas</i><br><p> <html> <br> <head> <br> <title>quadros</title> <br> </head> <br> <frameset cols="20%,80%"> <br> <frame src="menu.html"> <br> <frameset rows="15%,85%"> <br> <frame src="logotype.html"> <br> <frame src="text.html"> <br> </frameset> <br> </frameset> <br> </html> <br></p> <p>O terceiro caso é um pouco mais complicado, mas não tenha medo... principalmente porque eu pessoalmente escolhi esse tipo de construção para um site sobre arte culinária, explicarei o porquê a seguir; O que nós temos? três colunas, e a segunda coluna contém essencialmente nosso primeiro caso.</p> <b><frameset cols="*,800,*"> </b> <i>- divida a janela em três colunas (observe que a segunda coluna ocupa exatamente 800 pixels e as duas externas não têm tamanho exato e dividirão o espaço restante pela metade)</i><br><b><frame src="dekor.html"> </b> <i>-na primeira coluna carregamos um documento html que desempenhará uma função puramente decorativa</i><p><b><frameset rows="15%,85%"> </b> -<br><b><frame src="logotype.html"> </b> -<br><b><frameset cols="20%,80%"> </b> - <i>Na segunda coluna inserimos nosso “primeiro caso”</i><br><b><frame src="menu.html"> </b> -<br><b><frame src="text.html"> </b> -<br><b></frameset> </b> -<br><b></frameset> </b> -</p><p><b><frame src="dekor.html"> </b><i>- na terceira coluna carregamos o mesmo arquivo com decorações</i><br><b></frameset> </b><i>- bater</i><br></p><p>Veja o exemplo e depois explicarei porque escolhi o caminho das cinco janelas</p> <p> <html> <br> <head> <br> <title>quadros</title> <br> </head> <br> <frameset cols="*,800,*"> <br> <frame src="dekor.html"> <br> <frameset rows="120,*"> <br> <frame src="logotype.html"> <br> <frameset cols="200,600"> <br> <frame src="menu.html"> <br> <frame src="text.html"> <br> </frameset> <br> </frameset> <br> <frame src="dekor.html"> <br> </frameset> <br> </html> <br></p> <p>Então, por que cinco janelas? Lembro que já escrevi sobre o fato de diferentes internautas terem resoluções diferentes em seus monitores e, portanto, em telas diferentes nosso site terá uma aparência diferente... e se não houver tamanhos específicos, todos os nossos desenhos, textos, tabelas serão , como se costuma dizer, “flutua” para aqueles usuários cujas resoluções de monitor são diferentes das suas. Quando organizamos o site usando uma tabela, o problema com as dimensões da página foi resolvido atribuindo uma largura e altura específicas a esta tabela, infelizmente, isso não pode ser feito com frames... mesmo se você especificar a largura dos frames que não estão; porcentagens, mas em pixels, ainda é a última coluna que se estenderá pela largura restante da janela do navegador e a página, como dizem, perderá sua “aparência comercializável”. Então o que deveríamos fazer? Temos que recorrer a pequenos truques... Ao definir a coluna central (na qual temos a página inteira) com um tamanho de 800 pixels, determinamos de uma vez por todas a sua largura, e a primeira e terceira colunas adimensionais, em além da decoração, funcionam como uma espécie de “molas” sobre as quais assenta a coluna central. Então, para pessoas com resolução de monitor pequena, essas janelas/campos serão estreitas, e para pessoas com resolução alta, serão largas, portanto, a coluna central não será afetada de forma alguma e agora podemos colocar quaisquer objetos nela com total confiança, com referência local precisa, sem nos preocuparmos com seu destino futuro. Compare o primeiro exemplo, onde há três janelas, e o terceiro, onde já existem cinco, não é melhor?</p> <p>Terminaremos com a colocação e os tamanhos das molduras... e já estamos presos aqui há muito tempo... vamos em frente.</p> <h2>Damos uma aparência elegante às molduras.</h2> <p>Em nosso último exemplo, a primeira coisa que chama sua atenção é um monte de barras de rolagem, que estão onde são necessárias e onde não são.. Vamos nos livrar deles, bem, você pode deixá-los em algum lugar.. Isso é feito usando o atributo <b>rolagem</b>- marcação <b><frame> </b>, pode ter um de três valores:</p> <ul><li><b>não</b> </li><li><b>sim</b>- sempre aparece</li><li><b>auto</b> </li> </ul><p> <html> <br> <head> <br> <title>quadros</title> <br> </head> <br> <frameset cols="*,800,*"> <br> <frame src="dekor.html" <b>rolagem = "não"</b>> <br> <frameset rows="120,*"> <br> <frame src="logotype.html" <b>rolagem = "não"</b> ><br> <frameset cols="200,600"> <br> <frame src="menu.html"> <br> <frame src="text.html"> <br> </frameset> <br> </frameset> <br> <frame src="dekor.html" <b>rolagem = "não"</b>> <br> </frameset> <br> </html> <br></p> <p>Os campos do quadro, ou então a distância dos limites do quadro ao texto ou imagem, como no nosso caso, são especificados em pixels usando atributos <b>largura de margem</b> E <b>altura da margem</b> marcação <b><frame> </b></p> <p> <html> <br> <head> <br> <title>quadros</title> <br> </head> <br> <frameset cols="*,800,*"> <br> <frame src="dekor.html" scrolling="no"> <br> <frameset rows="120,*"> <br> <frame src="logotype.html" scrolling="no" <b>largura da margem = "0" altura da margem = "0"</b>> <br> <frameset cols="200,600"> <br> <frame src="menu.html"> <br> <frame src="text.html" <b>largura da margem = "10" altura da margem = "10"</b>> <br> </frameset> <br> </frameset> <br> <frame src="dekor.html" scrolling="no"> <br> </frameset> <br> </html> <br></p> <p>Vamos falar um pouco sobre a estrutura em torno dos nossos quadros.</p> <p>Se você notou, no último exemplo, ao passar o cursor sobre a borda do quadro, o cursor, ou seja, ganha uma aparência diferente (agarrar e mover) e agora essa borda pode ser arrastada em qualquer direção enquanto segura o botão esquerdo botão do mouse. Às vezes, essa “mobilidade” dos limites do quadro faz o favor do webmaster, mas na maioria das vezes ainda atrapalha.. Para evitar que o usuário brinque com os tamanhos das janelas da tag <b><frame> </b> surgiu um atributo <b>tamanho normal</b></p> <p> <html> <br> <head> <br> <title>quadros</title> <br> </head> <br> <frameset cols="*,800,*"> <br> <frame src="dekor.html" scrolling="no" <b>tamanho normal</b>> <br> <frameset rows="120,*"> <br> <frame src="logotype.html" scrolling="no" marginwidth="0" marginheight="0" <b>tamanho normal</b>> <br> <frameset cols="200,600"> <br> <frame src="menu.html" <b>tamanho normal</b>> <br> <frame src="text.html" marginwidth="10" marginheight="10" <b>tamanho normal</b>> <br> </frameset> <br> </frameset> <br> <frame src="dekor.html" scrolling="no" <b>tamanho normal</b>> <br> </frameset> <br> </html> <br></p> <p>Mas este é um atributo que nos é familiar há muito tempo <b>fronteira</b> define a largura em pixels desses mesmos frames entre os frames.. está escrito dentro da tag <b><frameset> </b>. O mesmo que antes do significado <b>borda = "0"</b> nos libertará completamente das estruturas.</p> <p> <html> <br> <head> <br> <title>quadros</title> <br> </head> <br> <frameset cols="*,800,*" <b>borda = "0"</b>> <br> <frame src="dekor.html" scrolling="no" noresize> <br> <frameset rows="120,*" <b>borda = "0"</b>> <br> <frame src="logotype.html" scrolling="no" marginwidth="0" marginheight="0" noresize> <br> <frameset cols="200,600" <b>borda = "0"</b>> <br> <frame src="menu.html" noresize> <br> <frame src="text.html" marginwidth="10" marginheight="10" noresize> <br> </frameset> <br> </frameset> <br> <frame src="dekor.html" scrolling="no" noresize> <br> </frameset> <br> </html> <br></p> <h2>Quadros e links.</h2> <p>É hora de reviver nosso site com links, mas aqui está o problema, o link comum e familiar <b>Feijão na panela, estilo italiano</b> irá abrir este documento no mesmo quadro onde está localizado, no nosso caso diretamente no quadro com o conteúdo, e o próprio conteúdo no momento de clicar neste link irá para o esquecimento.. você pode ver o exemplo desajeitado. . clique em qualquer link nele.. Para evitar que isso aconteça no futuro, é necessário indicar ao navegador em qual quadro o documento que precisamos deve ser aberto, a menos, é claro, que você realmente precise abri-lo no mesmo quadro.</p> <p>Lembro que já conhecemos, no capítulo dedicado aos links, atributos <b>nome</b>- nome e <b>alvo</b>- objetivo, também são utilizados no trabalho com molduras, o mecanismo foi ligeiramente alterado e é quase o mesmo. Em primeiro lugar, deve ser atribuído um nome individual ao quadro no qual gostaríamos de abrir quaisquer documentos.</p> <p>está escrito assim:</p><p> <frame src="text.html" <b>nome="osnovnoe"</b>> você pode inventar qualquer nome.. o principal é não esquecer..</p> <p>Está escrito assim:</p><p>alvo = "osnovnoe"</b>>Feijão na panela, estilo italiano</p><p>Bem, acho que não há necessidade de te explicar que antes de consultar qualquer documento, você precisa criá-lo... no meu caso, os arquivos (receitas) têm os nomes text.html, text1.html, text2.html ...</p> <p>Olhe para o exemplo:</p> <p>Arquivo index.html <br> <html> <br> <head> <br> <title>quadros</title> <br> </head> <br> <frameset cols="*,800,*" border="0"> <br> <frame src="dekor.html" scrolling="no" noresize> <br> <frameset rows="120,*" border="0"> <br> <frame src="logotype.html" scrolling="no" marginwidth="0" marginheight="0" noresize> <br> <frameset cols="200,600" border="0"> <br> <frame src="menu.html" noresize> <br> <frame src="text.html" <b>nome="osnovnoe"</b> marginwidth="10" marginheight="10" noresize> <br> </frameset> <br> </frameset> <br> <frame src="dekor.html" scrolling="no" noresize> <br> </frameset> <br> </html> <br>Arquivo menu.html <br> <html> <br> <head> <br> <title>quadros</title> <br> </head> <br> <body bgcolor="#e8e8e8" background="fon1.jpg" link="#b40000" alink="#900000" vlink="#900000"> <br> <font face="Monotype Corsiva" size="6"color="#ff0000">Cardápio:</font><hr> <br> <font face="Comic Sans MS" size="3"> <br>alvo = "osnovnoe"</b>>Sopa de champignon <hr> <br>alvo = "osnovnoe"</b>>Feijão na panela, estilo italiano <hr> <br>alvo = "osnovnoe"</b>> Salada de verão australiana <hr> <br> ... ... ... <br> </font> <br> </body> <br> </html> <br></p> <p>Assim como antes, o documento pode ser aberto em uma janela separada. Deixe-me lembrá-lo de que está escrito assim:</p><p>alvo="_em branco"</b>>Feijão na panela, estilo italiano</p><p>Ou atribuindo o atributo <b>alvo</b> significado <b>_principal</b> abra-o na mesma janela do navegador, mas em tela cheia.. “zerando” tudo que está ali.. está escrito assim:</p><p>alvo="_top"</b>>Feijão na panela, estilo italiano</p><p>O site ficou assim... claro que ainda há trabalho a fazer nele... além disso, segundo a minha ideia, terá uma estrutura um pouco diferente em termos de navegação pelo site, terá um monte de páginas, um menu lindo, mas quanto à estrutura do frame, acho que ela continuará a mesma..</p> <h2>quadro flutuante</h2> <p>Às vezes é necessário inserir outro documento HTML ou mesmo uma série desses documentos em uma página contendo uma estrutura sem quadro em uma janela separada. Para cumprir esse propósito existe uma tag <b><iframe> </b>- o chamado quadro flutuante.</p> <p>Esta tag possui vários atributos:</p> <b>fonte</b>- um atributo obrigatório que indica o caminho para a página a ser aberta <br><b>largura</b>- largura do quadro flutuante em pixels ou porcentagens <br><b>altura</b>- altura do quadro flutuante <p><b>rolagem</b>- mostrar barra de rolagem</p><ul><li><b>não</b>- nunca mostre a barra de rolagem,</li><li><b>sim</b>- sempre aparece</li><li><b>auto</b>- mostre se for necessário.</li> </ul><b>alinhar</b>- alinhamento de quadro flutuante <ul><li><b>esquerda</b>- esquerda</li><li><b>certo</b>- na direita</li><li><b>principal</b>- mais alto</li><li><b>fundo</b>- abaixo</li> </ul><b>moldura</b>- presença de uma moldura ao redor da moldura flutuante <ul><li><b>1 </b>- habilitar quadro</li><li><b>0 </b>- desligue o quadro</li> </ul><p>Todos juntos está escrito assim:</p> <b><iframe src="primer.html" width="300" height="250" align ="left" scrolling="auto" frameborder="1" >
Documento de exemplo com moldura flutuante:

quadro flutuante

quadro flutuante

O chamado "quadro flutuante" foi introduzido nesta página.
Em uma janela separada, abre outro documento HTML para exibição.

… … …

Sem quadros

Alguns navegadores não suportam a estrutura do quadro do documento ou a interpretam incorretamente. Além disso, os usuários geralmente desativam deliberadamente o suporte para a estrutura do quadro do documento HTML nas configurações do navegador; E embora a porcentagem desses navegadores e usuários seja pequena, eles ainda existem.

Agora imagine que você construiu seu site usando uma estrutura de frames e alguns visitantes, talvez sem saber qual é o problema, tentam abrir seu site e seu navegador apresenta um erro! O que eles vão pensar do seu site? Penso algo como: “Ugh.. algum tipo de bobagem.. Não voltarei aqui!”

Para deixar claro ao usuário que as configurações do seu navegador/navegador não suportam frames, existe uma tag

O resultado do exemplo será perceptível se o seu navegador realmente não suporta frames (aqui pensei por muito tempo.. :) se for assim, então por que ler este capítulo?) ou você desativou o suporte a frames no seu navegador como um experimento.

Marcação