Antes de usar frames na prática, não faria mal nenhum descobrir o que são, bem como os benefícios de usar frames para organizar informações nas páginas do site em comparação com as mesmas tabelas.

Todos os exemplos anteriores neste livro analisaram o alinhamento de texto, gráficos, tabelas e outros conteúdos em documentos HTML em uma janela do navegador. No entanto, poderia exibir o conteúdo de apenas um documento. O uso de frames permite dividir a janela do navegador em várias partes, nas quais diferentes documentos HTML podem ser exibidos. Por exemplo, como mostrado na Fig. 8.1.

Arroz. 8.1. Três documentos em uma janela

Neste caso, o conteúdo de cada documento é alinhado em relação à sua própria moldura de janela. Agora imagine que o quadro superior esquerdo contém links para recursos do site, o canto inferior esquerdo contém alguma publicidade ou outras informações e o grande quadro direito contém texto. Digamos que quando você navega em um site, apenas o texto exibido no frame direito muda. Neste caso, o uso de frames permite o seguinte.

Role o conteúdo de alguns quadros independentemente do conteúdo de outros.

Navegue entre as páginas do site, carregando o conteúdo apenas no quadro certo. Isso economiza tempo do usuário, pois o conteúdo estático do site é baixado do servidor apenas uma vez.

Agora que você se familiarizou com os frames, poderá ver como os sites são criados e configurados usando frames.

Mesmo o site mais simples mostrado na Fig. 8.1, consiste em quatro documentos HTML. O conteúdo de três deles é mostrado na janela do navegador. O quarto documento, que precisa ser aberto pelo navegador, contém descrições dos frames em que a janela está dividida e também inclui instruções para o navegador de onde carregar as páginas nos frames criados. O conteúdo do documento HTML é mostrado no exemplo 8.1.

Exemplo 8.1. Arquivo de descrição do quadro

Aqui você pode ver dois novos elementos HTML: FRAMESET e FRAME. O primeiro é usado para dividir a janela do navegador ou a janela do quadro pai em quadros separados. O elemento FRAMESET é especificado por tags emparelhadas E. Ao dividir uma janela em quadros, são utilizados os seguintes atributos do elemento FRAMESET:

Cols – lista de valores de largura dos frames criados (podem ser utilizados tanto valores absolutos em pixels e porcentagens, quanto proporcionais, ver exemplo 8.1);

Linhas – lista de valores de altura dos quadros criados (os valores são semelhantes aos valores do atributo cols).

Você pode definir os valores de apenas um dos atributos. Além disso, se apenas o atributo col for definido, os frames criados ocuparão toda a altura da janela do navegador. Se apenas o atributo rows for definido, os quadros criados ocuparão toda a largura da janela do navegador. Se ambos os atributos estiverem definidos, os quadros serão criados da esquerda para a direita e de cima para baixo.

Entre tags E deve conter descrições de cada quadro usando o elemento HTML FRAME ou definições de quadros aninhados. Vejamos primeiro a descrição de frames usando o elemento FRAME. Este elemento HTML é especificado usando uma única tag . Abaixo estão seus atributos mais comumente usados:

Nome – especifica o nome do quadro, permitindo que ele seja utilizado como quadro alvo em hiperlinks;

Src – URI do documento cujo conteúdo é exibido na janela do quadro;

Noresize – Atributo booleano que bloqueia a capacidade de redimensionar a janela do quadro;

Rolagem – permite mostrar ou ocultar barras de rolagem em uma janela de quadro, podendo assumir os valores sim (mostrar barras de rolagem), não (não mostrar barras de rolagem) ou automático (padrão: mostrar barras de rolagem somente se o conteúdo não caber na moldura da janela);

Frameborder – indica se o navegador deve mostrar o quadro da janela, podendo assumir valores 1 (o quadro é mostrado como na Fig. 8.1, usado por padrão) ou 0 (o quadro não é mostrado);

Marginheight – define a distância vertical entre as bordas e o conteúdo do quadro.

O conceito de quadros aninhados foi abordado anteriormente. Agora é hora de examinar detalhadamente o aninhamento de quadros. Em HTML, os frames podem ser aninhados uns nos outros inúmeras vezes. Isto é usado quando você precisa dividir uma janela do navegador, por exemplo, como feito na Fig. 8.1. Estude a seguinte passagem cuidadosamente.

Isso cria um conjunto externo de dois quadros que ocupam toda a altura da janela do navegador. Isso cria outro conjunto de quadros no quadro esquerdo do conjunto externo. Vale ressaltar que o bloco … semelhante a um único elemento FRAME (descreve o conteúdo de um quadro do conjunto externo). Analisando o fragmento acima, podemos dizer claramente que o quadro esquerdo do conjunto externo é dividido e o conteúdo do documento page3.html é carregado no quadro direito.

Há mais uma diferença notável no documento frameset - ele não possui corpo (elemento BODY). Tal documento não pode conter conteúdo diferente da definição do conjunto de quadros.

Quase no início deste capítulo, foi dito que com a ajuda de frames você pode organizar a navegação do site de forma que apenas as informações necessárias sejam baixadas do servidor, e todas as partes estáticas (por exemplo, uma lista de links de sites, nome do site, etc.) estarão sujeitos a alterações ou reinicialização a partir do servidor. Esta possibilidade é conseguida especificando um frame alvo para hiperlinks, ao clicar nele é necessário alterar apenas o conteúdo de um dos frames.

O atributo target é utilizado para especificar o frame alvo de cada hiperlink, ou seja, o frame no qual será exibido o conteúdo do documento HTML aberto pelo link. O valor deste atributo pode ser o nome do quadro desejado (o valor do atributo name desse quadro) ou um dos seguintes valores de string predefinidos:

Em branco – abre o documento em uma nova janela;

Auto – abra o documento na mesma janela onde está o hiperlink;

Pai – abre o documento na janela do quadro pai (igual a _self, se o quadro no qual o hiperlink está localizado não tiver pai);

Superior – substitui o conteúdo da janela do navegador pelo conteúdo do documento que está sendo aberto, descartando todos os frames criados anteriormente.

O atributo target é compatível com todos os elementos HTML que permitem criar hiperlinks: A, LINK, AREA.

Agora, para consolidar o conhecimento adquirido, reelaboraremos o documento do exemplo 7.11 do capítulo anterior, colocando links, nome e texto do site em frames separados.

O documento que descreve o conjunto de quadros será denominado index.html. Seu conteúdo é mostrado no exemplo 8.2.

Exemplo 8.2. Arquivo de descrição do conjunto de quadros

altura da margem = 0 borda do quadro = 0>

No exemplo acima, o nome é atribuído a apenas um quadro (o canto inferior direito). É neste quadro que será exibido o conteúdo dos documentos.

O arquivo links.html contém um documento com hiperlinks para os arquivos de exemplo (também contém um link para a página inicial). Supõe-se que os arquivos de exemplo estejam localizados na pasta Exemplos. Abaixo está o conteúdo do arquivo links.html (observe o valor do atributo target dos hiperlinks) (Exemplo 8.3).

Exemplo 8.3. Arquivo com hiperlinks

Texto do capítulo

Exemplo 7.1

Exemplo 7.2

Exemplo 7.3

Exemplo 7.4

Exemplo 7.5

Exemplo 7.6

Exemplo 7.7

Exemplo 7.8

Exemplo 7.9

Exemplo 7.10

O arquivo title.html contém o título do site (junto com um logotipo hipotético), que é exibido no quadro correspondente (exemplo 8.4).

Exemplo 8.4. Arquivo para o quadro com o cabeçalho do site

7. Tabelas

Como você pode ver no texto do documento HTML (ver exemplo 8.4), para conseguir uma localização aceitável para a imagem do logotipo, tivemos que recorrer ao uso de uma tabela. No site de exemplo em consideração, outro arquivo é usado - start.html. Este arquivo contém a página inicial do site. O conteúdo deste arquivo pode ser qualquer coisa. Ao escrever o exemplo, parte do texto do Capítulo foi colocada no arquivo start.html. 7. Para economizar espaço no livro, o conteúdo deste arquivo não é fornecido. Após a criação de todos os arquivos do site, você poderá admirar o resultado (Fig. 8.2). Arroz. 8.2. Site criado com frames Quadro de destino padrão Finalmente, vamos ver como você pode reduzir a quantidade de texto em um documento HTML ao usar o mesmo quadro como quadro de destino para muitos hiperlinks. Dê uma outra olhada no texto do Exemplo 8.3. Cada hiperlink neste exemplo possui o mesmo valor de atributo de destino. Para evitar ter que especificá-lo muitas vezes, você pode atribuir um quadro de destino padrão. O quadro de destino HTML padrão é definido como o elemento BASE (uma única tag ). O atributo target deste elemento é definido como o nome do quadro padrão. Se o elemento BASE for utilizado, ele deverá ser colocado no HEAD do documento HTML. Dito isto, o Exemplo 8.3 pode ser reescrito da seguinte forma (Exemplo 8.5). Exemplo 8.5. Usando o quadro de destino padrão Texto do capítulo Exemplo 7.1 Exemplo 7.2 Exemplo 7.3 Exemplo 7.4 Exemplo 7.5 Exemplo 7.6 Exemplo 7.7 Exemplo 7.8 Exemplo 7.9 Exemplo 7.10 8.4. Elemento NOFRAMES Os frames são uma forma muito atraente de criar sites, como deveria ter ficado óbvio nos exemplos dados anteriormente. Porém, os frames em HTML não apareciam imediatamente e por muito tempo não eram padronizados, portanto o processamento e a apresentação de documentos com frames por diferentes navegadores ainda podem diferir significativamente. Além disso, um número bastante grande de usuários ainda pode ter versões mais antigas de navegadores que não suportam frames. Se for importante que o usuário veja pelo menos algo ao visualizar um site que utiliza frames, então o elemento HTML NOFRAMES deve ser utilizado. Este elemento é especificado por tags emparelhadas E. Ele é colocado em um arquivo com uma descrição do conjunto de quadros. O texto HTML é colocado entre as tags do elemento NOFRAMES, que o navegador exibe se não suportar frames (ou se o usuário tiver desativado o suporte a frames no navegador). Se o navegador for capaz de mostrar frames, o texto entre as tags do elemento NOFRAMES será ignorado. Texto entre tags E pode ser formatado exatamente da mesma forma como se estivesse entre tags E. Claramente, muito mais sites portáteis podem ser criados usando o elemento NOFRAMES, especialmente se for tomado cuidado para garantir que nenhuma informação importante seja perdida quando os frames não puderem ser exibidos. Para o site discutido anteriormente, você pode criar uma versão que não utiliza frames (feita, por exemplo, usando apenas tabelas), e dentro do elemento NOFRAMES você pode colocar uma mensagem informativa e um link para esta versão do site (exemplo 8.6 ). Exemplo 8.6. Usando o elemento NOFRAMES altura da margem = 0 borda do quadro = 0> Atenção! O seu navegador não suporta frames. Para abrir uma versão do site que não utiliza frames, clique em aqui. 8.5. Quadros flutuantes Além dos frames regulares discutidos anteriormente, o HTML permite o uso dos chamados frames flutuantes. Os frames flutuantes são exatamente iguais aos documentos HTML incorporados: eles são mostrados pelo navegador em uma janela localizada diretamente no texto (Figura 8.3). Arroz. 8.3. Aparência de um quadro flutuante Para criar quadros flutuantes, use o elemento HTML IFRAME (definido usando tags emparelhadas ). O quadro flutuante é configurado usando os seguintes atributos: Src – URI do documento HTML exibido na janela do frame; Frameborder – modo de exibição da borda do quadro, pode assumir valores 0 (não mostrar borda) ou 1 (mostrar borda); Rolagem – modo de exibição das barras de rolagem do conteúdo do quadro, pode assumir os valores não (não mostrar barras de rolagem), sim (mostrar barras de rolagem) ou auto (usado por padrão, mostrar barras de rolagem somente se o conteúdo não couber); Marginwidth – define a distância horizontal entre as bordas do quadro e seu conteúdo (em pixels); Marginheight – define a distância vertical entre as bordas e o conteúdo do quadro; Alinhar – define a posição da moldura flutuante no texto, podendo assumir os valores esquerda, direita e centro; Largura – define a largura da janela do quadro flutuante, o valor pode ser absoluto (em pixels) ou percentual; Altura – define a altura da janela do quadro flutuante. Texto entre tags é exibido pelo navegador somente se for impossível exibir o próprio quadro flutuante. Como exemplo de utilização do elemento IFRAME, segue abaixo o texto de um documento HTML, cuja aparência é mostrada na Fig. 8.3 (exemplo 8.7). Exemplo 8.7. Documento de quadro flutuante Um quadro flutuante se parece com isto: