Frame - che cos'è? Struttura e creazione del telaio

Sommario:

Frame - che cos'è? Struttura e creazione del telaio
Frame - che cos'è? Struttura e creazione del telaio
Anonim

Un frame è un'area di un sito (finestra) in cui è visibile un' altra pagina web. I webmaster sfruttano questa opportunità per mostrare la home page dei siti dei loro amici o partner. La stessa tecnica viene utilizzata per visualizzare il modulo di ricerca nelle caselle con il risultato accanto, ecc.

Ma soprattutto i frame vengono utilizzati nella creazione di grandi portali web, dove è richiesto un numero considerevole di voci di menu e sottomenu. Di solito dicono di queste persone: "sito web su frame". Per creare una tale risorsa è richiesta una buona conoscenza dell'HTML.

Creazione di frame nel costruttore di siti Web

Alcuni costruttori di siti Web forniscono la generazione automatica di tale codice. Di solito il pulsante Aggiungi frame si trova nel menu principale del programma. Per prima cosa devi posizionare il cursore nel posto giusto sulla pagina, quindi fare clic sul pulsante, si aprirà una finestra (come mostrato nello screenshot). In esso, puoi impostare l'indirizzo della pagina che si aprirà nella cornice e regolarne le dimensioni: larghezza e altezza.

Ma soprattutto i frame vengono utilizzati nella creazione di grandi portali web, dove è richiesto un numero considerevole di voci di menu e sottomenu. Di solito dicono di queste persone: "sito web su frame". Per creare una tale risorsa è necessaria una buona conoscenzaLinguaggio HTML.

creazione di cornici
creazione di cornici

Con l'aiuto di questo "servizio" è possibile creare più frame sulla pagina, ma non otterrai elementi interconnessi in questo modo.

Frame in CMS

In molti programmi per la creazione di siti web è possibile installare il modulo corrispondente. Ad esempio, per Joomla, un frame è un modulo "Wrapper".

inquadralo
inquadralo

Può essere trovato e creato nel pannello di controllo di Joomla CMS: "Estensioni" - "Gestione moduli" - "Crea" (un pulsante rotondo arancione con all'interno un segno più). Nella finestra pop-up, nell'elenco, vedrai il modulo "Wrapper".

Se non è qui, non è incluso. Per usarlo, devi prima attivarlo qui: scheda "Estensioni", quindi "Gestione estensioni", quindi scheda "Gestione". E stiamo cercando nell'elenco che si apre, per una rapida ricerca nel campo "Filtro", inserisci la parola: Wrapper. Di fronte a questo modulo dovrebbe esserci un'icona verde con un segno di spunta all'interno. Un cerchio rosso con un punto all'interno significa che questo plugin è disabilitato.

Dopo questa procedura, puoi tornare al "Module Manager", creare un frame e impostarne i parametri.

cos'è una cornice
cos'è una cornice

Come puoi vedere nella foto, il modulo ti permette di impostare: il titolo sopra la cornice, la posizione del modulo, selezionare le pagine del sito su cui verrà visualizzato. E regola anche la larghezza, l' altezza; aggiungi una cornice e in re altàcollegamento a una pagina web. Se in un frame vuoi visualizzare la pagina principale di un sito a tutta larghezza, il 100%, impostato di default, non sarà sufficiente. Puoi mettere immediatamente in sicurezza il 400%. Un' altezza di 200 è generalmente sufficiente per visualizzare il menu in alto della pagina. Tutti gli altri contenuti saranno visibili se l'utente (visitatore del sito web) utilizza la barra di scorrimento.

Ecco un esempio di cosa sia un frame in Joomla.

esempi di cornici
esempi di cornici

Il modulo Jumla per la creazione di una cornice è molto comodo e facile da usare. Tuttavia, le sue capacità sono limitate, così come le capacità del costruttore.

Storia e re altà

Nella pratica di creare siti da frame, questo tag (la sua applicazione) è passato molto tempo in secondo piano. Possono essere sostituiti da moduli, impostazioni nei programmi di costruzione che generano codice per una pagina Web senza la partecipazione di un costruttore di siti. Tuttavia, in alcuni casi questo non è sufficiente. Ad esempio, quando un frame è una struttura olistica complessa di aree visualizzate nel browser. Ecco come la vedono i proprietari di siti strutturati in modo complesso. La sua creazione viene utilizzata solo in casi estremi, poiché i siti frame vengono creati esclusivamente con l'aiuto di tag specializzati.

Siti strutturati in modo complesso

Per loro, la creazione di più frame interconnessi è la soluzione migliore per organizzare i contenuti nelle pagine delle risorse. Questi sono, di regola, grandi portali, che diventano più forti ogni anno.

Come ottenere lo stesso risultato? Come viene creata la struttura del telaio?

struttura del telaio
struttura del telaio

Comeinserisci cornice nel codice pagina

I frame in HTML vengono aggiunti utilizzando i tag:

  • frame (per una finestra separata);
  • frameset (usandolo per creare un'intera struttura);
  • iframe (frame "fluttuante");
  • noframes (nel caso in cui il frame non sia visualizzato nel browser dell'utente).

Il primo tag specificato rientra sempre in una coppia di e. E sostituisce e. E con l'aiuto degli attributi appropriati, puoi regolare le caratteristiche di ogni elemento: il nome (nome=), la dimensione (cols=e righe=), la presenza di un bordo (bordo), l'aspetto della barra di scorrimento e, ovviamente, il link alla pagina web da visualizzare.

Variazioni di design

L'intera pagina del sito può essere divisa in aree. Ad esempio, in questo modo:

Sinistra Telaio superiore
Giusto

Una tale struttura (si chiama nidificata) può essere ottenuta scrivendo l'attributo cols all'interno del tag, che significa la posizione del frame in orizzontale, e righe - in verticale. Successivamente, viene inserito il segno=e vengono prescritte le dimensioni. Ad esempio, 60%, 40% - percentuale (una finestra occuperà il 60% dello spazio del browser, l' altra, rispettivamente, il 40%). O 100, 200 - proporzioni in pixel. La dimensione di uno dei frame non può essere impostata affatto (sarà impostata per impostazione predefinita). Per fare ciò, dopo o prima della virgola, è necessario specificare il simbolo.

Nidificazioneogni nuova area è indicata da un nuovo frameset.

Esempio di codice:

Nota che nel nostro esempio, per il secondo e il terzo frame, le dimensioni sono specificate solo una volta.

Molte idee ti permettono di completare le cornici. Esempi della loro posizione nella finestra del browser possono essere forniti all'infinito (modificando il codice di conseguenza). Tuttavia, queste informazioni non hanno trovato applicazione pratica da molto tempo. I frame, se utilizzati oggi durante la creazione di siti, sono solo sotto forma di moduli in CMS gratuiti o sotto forma di iframe.

Cornice mobile

sito su frame
sito su frame

È strano il motivo per cui ha avuto un tale nome, la parola "integrato" è più adatta qui. Questa cornice viene creata per visualizzare il contenuto di un file. Carichi qualsiasi documento o file nel database, scrivi il percorso utilizzando i tag iframe e i visitatori vedranno il testo del file (video o immagine). Sfortunatamente, i browser non eseguono sempre il rendering dei contenuti. Per fare ciò, i web builder inseriscono la frase tra i tag di apertura e chiusura: "Il tuo browser non visualizza i contenuti".

Ad esempio, Seopult.ru è un servizio ben noto per i maestri della promozione. Solo non il suo sito principale, ma un mirror I.seopult.pro, creato per i client del portale. Il codice iframe è scritto qui come segue:

Istruzioni

. Dov'è il tag

  • è stato creato per definire una voce di elenco. Supportato da tutti i browser.

    Sulla pagina mirror stessa, puoi vedere la parola "Istruzioni" sotto forma di un pulsante. Cliccandoci sopra al centro della finestra del browser si apre la presentazione.

    Tutto grandei siti per la visione di film e serie vengono creati utilizzando iframe (ad esempio "Imhonet") e social network. Anche la pagina principale di "Yandex" contiene questo tag e più di una coppia.

    Come scrivere un iframe

    Puoi caricare un documento sotto forma di finestra con una barra di scorrimento in qualsiasi punto del sito. Di solito i tag sono posizionati all'interno del corpo. Oltre lo standard

    e, come mostrato nell'esempio sopra, il tag list può essere utilizzato anche -

    • Gli attributi vengono aggiunti all'iframe:

      • larghezza (larghezza) e altezza (altezza=);
      • allineamento bordo align;
      • rientri che possono essere specificati o meno: il valore predefinito è 6 - questo è abbastanza;
      • usando allowtransparency, puoi impostare la trasparenza dell'area della cornice in modo da poter vedere lo sfondo della pagina;
      • più il familiare scr, nome, scorrimento, bordo.

      Navigazione con un iframe

      L'abilità di framing più interessante è scrivere codice che ti permetta di aprire il contenuto in una finestra tramite un link, che è quello che hanno fatto i creatori del mirror Seopult, solo con più link contemporaneamente (contemporaneamente a disposizione dell'utente su la stessa pagina).

      Per questo, viene preso un iframe, il nome viene inoltre scritto in esso tramite name=. Ad esempio, intestazione. Inoltre, prima di esso nei tag e nei link vengono scritti tramite un HREF=con l'indicazione obbligatoria dell'attributo dopo di essi. Prima di utilizzare il tag di chiusura a, viene indicata una scritta che fungerà da pulsante di collegamento. Tag "a" apertura e chiusurasono racchiusi nel tag p.

      Puoi scrivere diverse righe di questo tipo nel codice per ottenere eventualmente diversi pulsanti di collegamento in una riga sul sito, facendo clic su quale contenuto diverso verrà visualizzato nella finestra sottostante.

      Il codice apparirà così:

      Pubblica un annuncio

      Visualizza annunci

      Image
      Image

      Come apparirà sul sito web:

      Come inserire un iframe in un sito Joomla

      Come standard, il pannello di controllo di Joomla ha un modulo "codice HTML" abilitato (pronto all'uso). Con esso, puoi inserire qualsiasi codice in qualsiasi punto del sito. Tuttavia, ignora ostinatamente il codice con il tag iFrem. Pertanto, utilizzeremo uno speciale modulo Jumi.

      Prima di tutto, devi scaricarlo da Internet e installarlo tramite il pannello amministrativo di Joomla: "Estensioni" - "Gestione estensioni" - "Seleziona file". Specifica il percorso dell'archivio scaricato e fai clic su "Download".

      Dopo aver completato l'installazione, vai su "Module Manager" e creane uno nuovo. Seleziona il tipo di Jumi. Nella finestra che si apre, nel campo "Codice personalizzato", inserisci l'iFrem predisposto, come mostrato nel paragrafo precedente dell'articolo. Assegna un titolo al modulo, specifica la posizione del posizionamento e le pagine del sito. Fai clic su Salva e verifica.

      Browser e frame

      Tutti i browser più diffusi mostrano bene il contenuto delle finestre frame: Chrome, Safari, Firefox, Android, iOS. Internet Explorer e Opera hanno un tasso particolarmente alto in questo senso. Eppure non c'è alcuna garanziache il visitatore del tuo sito vedrà il contenuto di tutte le finestre. In questo caso, dovresti lasciare un messaggio usando il tag noframe (apertura e chiusura). Puoi inserire quanto segue: "Il tuo browser non è aggiornato. Aggiorna la versione per visualizzare i contenuti del sito". Se il browser dell'utente esegue il rendering dei frame correttamente, non vedrà questo messaggio.

      Quindi un frame è un'area o una finestra di un sito che ha il proprio URL. Utilizzato per visualizzare più pagine Web o documenti indipendenti in un campo del browser contemporaneamente, avendo anche il proprio URL. Nonostante i frame consentano di organizzare bene un sito complesso, non vengono utilizzati da molto tempo, ad eccezione dell'iframe. L'uso di questo tag è ancora rilevante per caricare presentazioni, un video player, documenti di testo in una finestra specifica. Viene utilizzato attivamente da risorse Web grandi e note.

Consigliato: