Quadro - o que é? Estrutura e criação de quadros

Índice:

Quadro - o que é? Estrutura e criação de quadros
Quadro - o que é? Estrutura e criação de quadros
Anonim

Um frame é uma área em um site (janela) na qual outra página da web é visível. Os webmasters usam esta oportunidade para mostrar a página inicial dos sites de seus amigos ou parceiros. A mesma técnica é usada para exibir o formulário de pesquisa nas caixas com o resultado próximo a ele, etc.

Mas principalmente os frames são usados na criação de grandes portais da web, onde um número considerável de itens de menu e submenus são necessários. Eles costumam dizer sobre essas pessoas: "site em quadros". Um bom conhecimento de HTML é necessário para criar tal recurso.

Criando frames no construtor de sites

Alguns construtores de sites fornecem geração automática desse código. Normalmente, o botão adicionar quadro está localizado no menu principal do programa. Primeiro você precisa colocar o cursor no lugar certo na página, depois clicar no botão, uma janela será aberta (como mostrado na captura de tela). Nele, você pode definir o endereço da página que será aberta no frame, e ajustar as dimensões: largura e altura.

Mas principalmente os frames são usados na criação de grandes portais da web, onde um número considerável de itens de menu e submenus são necessários. Eles costumam dizer sobre essas pessoas: "site em quadros". Para criar tal recurso requer um bom conhecimentoLinguagem HTML.

criando quadros
criando quadros

Com a ajuda deste "serviço" é possível criar vários frames na página, mas você não terá elementos interligados desta forma.

Frames no CMS

Em muitos programas para criação de sites, é possível instalar o módulo correspondente. Por exemplo, para Joomla, um frame é um módulo "Wrapper".

Enquadre isso
Enquadre isso

Ele pode ser encontrado e criado no painel de controle do Joomla CMS: "Extensões" - "Gerenciador de módulos" - "Criar" (um botão laranja redondo com um sinal de mais dentro). Na janela pop-up, na lista, você verá o módulo "Wrapper".

Se não estiver aqui, não está incluído. Para usá-lo, primeiro você precisa ativá-lo aqui: guia "Extensões", depois "Gerenciador de extensões", depois a guia "Gerenciamento". E estamos procurando na lista que se abre, para uma busca rápida no campo "Filtro", digite a palavra: Wrapper. Em frente a este módulo deve haver um ícone verde com uma marca de seleção dentro. Um círculo vermelho com um ponto dentro significa que este plugin está desabilitado.

Após este procedimento, você pode retornar ao "Module Manager", criar um quadro e definir seus parâmetros.

o que é um quadro
o que é um quadro

Como você pode ver na imagem, o módulo permite que você defina: o título acima do quadro, a posição do módulo, selecione as páginas do site em que ele será exibido. E também ajuste a largura, altura; adicione um quadro e na verdadelink para uma página da web. Se em um quadro você deseja exibir a página principal de um site em largura total, 100%, definido por padrão, não será suficiente. Você pode colocar imediatamente com segurança 400%. Uma altura de 200 geralmente é suficiente para exibir o menu superior da página. Todos os outros conteúdos ficarão visíveis se o usuário (visitante do site) usar a barra de rolagem.

Aqui está um exemplo do que é um frame no Joomla.

exemplos de quadros
exemplos de quadros

O módulo Jumla para criar um quadro é muito conveniente e fácil de usar. No entanto, seus recursos são limitados, assim como os recursos do construtor.

História e realidades

Na prática de criar sites a partir de frames, essa tag (sua aplicação) há muito desapareceu em segundo plano. Eles puderam ser substituídos por módulos, configurações em programas construtores que geram código para uma página web sem a participação de um construtor de sites. No entanto, em alguns casos, isso não é suficiente. Por exemplo, quando um quadro é uma estrutura holística complexa de áreas exibidas no navegador. É assim que os proprietários de sites complexamente estruturados veem isso. Sua criação é usada apenas em casos extremos, pois os sites de frames são criados exclusivamente com a ajuda de tags especializadas.

Sites com estrutura complexa

Para eles, criar vários frames interconectados é a melhor solução para organizar o conteúdo nas páginas de recursos. Estes são, via de regra, grandes portais, que se fortalecem a cada ano.

Como alcançar o mesmo resultado? Como a estrutura do quadro é criada?

quadro estrutural
quadro estrutural

Comoinsira o quadro no código da página

Frames em HTML são adicionados usando tags:

  • frame (para uma janela separada);
  • frameset (usando-o para criar uma estrutura inteira);
  • iframe (quadro "flutuante");
  • noframes (caso o frame não seja exibido no navegador do usuário).

A primeira tag especificada sempre se encaixa em um par de e. E substitui e. E com a ajuda dos atributos apropriados, você pode ajustar as características de cada elemento: o nome (name=), tamanho (cols=e rows=), a presença de uma borda (border), a aparência da barra de rolagem e, claro, o link para a página da web para exibir.

Variações de design

Toda a página do site pode ser dividida em áreas. Por exemplo, assim:

Esquerda Quadro superior
Direita

Tal estrutura (chamada aninhada) pode ser obtida escrevendo o atributo cols dentro da tag, o que significa a localização do quadro horizontalmente, e linhas - verticalmente. Em seguida, o sinal=é colocado e as dimensões são prescritas. Por exemplo, 60%, 40% - porcentagem (uma janela ocupará 60% do espaço do navegador, a outra, respectivamente, 40%). Ou 100, 200 - proporção em pixels. O tamanho de um dos quadros não pode ser definido (será definido por padrão). Para fazer isso, após ou antes da vírgula, você precisa especificar o símbolo.

Aninhamentocada nova área é indicada por um novo conjunto de quadros.

Exemplo de código:

Observe que em nosso exemplo, para o segundo e terceiro quadros, os tamanhos são especificados apenas uma vez.

Muitas ideias permitem que você complete quadros. Exemplos de sua localização na janela do navegador podem ser dados infinitamente (alterando o código de acordo). No entanto, esta informação não encontra aplicação prática há muito tempo. Os frames, se usados hoje na criação de sites, são apenas na forma de módulos no CMS gratuito ou na forma de um iframe.

Quadro flutuante

site em quadros
site em quadros

É estranho porque tem esse nome, a palavra "built-in" é mais adequada aqui. Este quadro é criado para exibir o conteúdo de um arquivo. Você carrega qualquer documento ou arquivo para o banco de dados, escreve o caminho para ele usando tags iframe - e os visitantes verão o texto do arquivo (vídeo ou imagem). Infelizmente, os navegadores nem sempre renderizam conteúdo. Para fazer isso, os construtores da web inserem a frase entre as tags de abertura e fechamento: "Seu navegador não está exibindo conteúdo."

Por exemplo, Seopult.ru é um serviço bem conhecido para mestres de promoção. Só não seu site principal, mas um espelho I.seopult.pro, criado para clientes do portal. O código do iframe é escrito aqui da seguinte forma:

Instruções

. Onde está a tag

  • foi criado para definir um item de lista. Compatível com todos os navegadores.

    Na própria página espelho, você pode ver a palavra "Instrução" na forma de um botão. Clicar nele no centro da janela do navegador abre a apresentação.

    Tudo grandesites para assistir filmes e séries são criados usando iframes (por exemplo, "Imhonet"), bem como redes sociais. Até a página principal do "Yandex" contém essa tag e mais de um par.

    Como escrever um iframe

    Você pode enviar um documento na forma de uma janela com uma barra de rolagem para qualquer lugar do site. Normalmente as etiquetas são colocadas dentro do corpo. Além do padrão

    e, como mostrado no exemplo acima, a tag list também pode ser usada -

    • Atributos são adicionados ao iframe:

      • largura (largura) e altura (altura=);
      • alinhamento de aresta;
      • recuos que podem ou não ser especificados: o valor padrão é 6 - isso é suficiente;
      • usando allowtransparency, você pode definir a transparência da área do quadro para que o fundo da página possa ser visto;
      • mais o familiar scr, nome, rolagem, borda.

      Navegando com um iframe

      A habilidade de enquadramento mais interessante é escrever código que permite abrir o conteúdo em uma janela por um link, que é o que os criadores do espelho Seopult fizeram, apenas com vários links de uma vez (disponíveis simultaneamente para o usuário no na mesma página).

      Para isso, um iframe é obtido, o nome é adicionalmente escrito nele através de name=. Por exemplo, cabeçalho. Além disso, antes dele nas tags e os links são escritos através de um HREF=com a indicação obrigatória do atributo depois deles. Antes de usar a tag de fechamento a, é indicada uma inscrição que servirá como botão de link. Tags "a" abrindo e fechandoestão incluídos na tag p.

      Você pode escrever várias dessas linhas no código para eventualmente obter vários botões de link em uma linha no site, clicando em qual conteúdo diferente será exibido na janela abaixo.

      O código ficará assim:

      Postar um anúncio

      Visualizar anúncios

      Image
      Image

      Como vai ficar no site:

      Como inserir um iframe em um site Joomla

      Como padrão, o painel de controle do Joomla possui um módulo de "código HTML" habilitado (pronto para uso). Com ele, você pode inserir qualquer código em qualquer lugar do site. No entanto, ele teimosamente ignora o código com a tag iFrem. Portanto, usaremos um módulo Jumi especial.

      Primeiro de tudo, você precisa baixá-lo da Internet e instalá-lo através do painel administrativo do Joomla: "Extensões" - "Gerenciador de extensões" - "Selecionar arquivo". Especifique o caminho para o arquivo baixado e clique em "Download".

      Após a instalação bem sucedida, vá para o "Module Manager" e crie um novo. Selecione o tipo de Jumi. Na janela que se abre, no campo "Código Personalizado", insira o iFrem preparado, conforme mostrado no parágrafo anterior do artigo. Dê um título ao módulo, especifique a posição da veiculação e as páginas do site. Clique em salvar e confira.

      Navegadores e frames

      Todos os navegadores populares exibem bem o conteúdo das janelas de quadros: Chrome, Safari, Firefox, Android, iOS. O Internet Explorer e o Opera têm uma taxa particularmente alta nesse sentido. E ainda não há garantiaque o visitante do seu site veja o conteúdo de todas as janelas. Neste caso, você deve deixar uma mensagem usando a tag noframe (abertura e fechamento). Você pode digitar o seguinte: "Seu navegador está desatualizado. Atualize a versão para exibir o conteúdo do site." Se o navegador do usuário renderizar os quadros corretamente, ele não verá esta mensagem.

      Então um frame é uma área ou janela de um site que tem seu próprio URL. Usado para exibir várias páginas da web ou documentos independentes em um campo do navegador de uma só vez, também tendo seu próprio URL. Apesar de os frames permitirem que você organize bem um site complexo, eles não são usados há muito tempo, exceto o iframe. O uso desta tag ainda é relevante para carregar apresentações, um player de vídeo, documentos de texto em uma janela específica. Ele é usado ativamente por grandes e conhecidos recursos da web.

Recomendado: