Creazione di un frame negli esempi HTML. Iframe e Frame: cosa sono e come utilizzare al meglio i frame in Html. Nuove funzionalità di collegamento ipertestuale

La parola "frame" significa cornice, cornice. Utilizzando i frame, lo spazio della finestra del browser viene suddiviso in sezioni indipendenti in cui possono essere visualizzate diverse informazioni. È conveniente utilizzare i frame quando è necessario visualizzare sullo schermo dati provenienti da varie fonti.

Nota 1

I riquadri dividono la finestra di visualizzazione del browser in una serie di sottoaree rettangolari posizionate una accanto all'altra. I singoli documenti HTML possono essere caricati in queste sottoaree e visualizzati indipendentemente gli uni dagli altri. Tra i frame, se necessario, è possibile organizzare l'interazione in base alla selezione di un collegamento in uno dei frame, che porterà al caricamento il documento richiesto in un altro frame o finestra del browser.

Aree di applicazione dei telai

Gli sviluppatori di documenti HTML hanno a disposizione un'ampia scelta di moduli per presentare informazioni sulle pagine. Testo e informazioni grafiche può essere ordinato e organizzato utilizzando elenchi, tabelle, opzioni di allineamento, impostazione di linee orizzontali e divisioni di paragrafo. Ma non sempre queste funzionalità sono sufficienti; in questi casi è necessario suddividere la finestra di visualizzazione del browser in aree separate (frame).

La scelta della struttura del frame per la presentazione delle informazioni sul WWW è giustificata da:

  • quando si organizza il controllo del caricamento del documento in una delle sottoaree della finestra di visualizzazione del browser mentre si lavora contemporaneamente in un'altra sottoarea;
  • quando si trovano in un determinato punto della finestra di visualizzazione, informazioni che saranno sempre presenti sullo schermo indipendentemente dal contenuto delle altre sottoaree dello schermo;
  • quando si visualizzano informazioni opportunamente dislocate in più sottoaree della finestra, ciascuna delle quali può essere visualizzata indipendentemente dalle altre.

La figura seguente mostra la struttura del frame di una finestra del browser di una pagina HTML.

Questa struttura è tipica nei casi in cui alcuni frame fungono da sommario per i documenti, mentre altri vengono utilizzati per caricarne il contenuto. In precedenza, tale compito veniva risolto in questo modo senza utilizzare frame. Su una delle pagine c'era un indice che consisteva in collegamenti ad altri documenti o ad alcuni frammenti. Quando si fa clic su un collegamento di questo tipo, il sommario è scomparso e al suo posto è stato caricato un documento, dopo averlo letto è stato necessario tornare nuovamente al sommario. Quando iniziarono ad essere utilizzati i frame, questo ritorno non fu più efficace, poiché il sommario cominciò ad essere posizionato permanentemente su una parte dello schermo.

I frame sono intrinsecamente simili alle tabelle, poiché entrambi li utilizzano per dividere la finestra del browser in aree rettangolari in cui si trovano le informazioni. Tuttavia, i frame consentono non solo di formattare le pagine del documento, ma anche di organizzare l'interazione tra di esse. Fondamentalmente i frame e le tabelle differiscono in quanto ciascun frame corrisponde a un documento HTML separato e il contenuto di tutte le celle della tabella fa parte di un unico documento. Inoltre, la pagina visualizzata nella cornice può scorrere se visualizzata indipendentemente dalle altre. Ogni frame è una sorta di mini-browser separato. Le tabelle, a differenza delle cornici, che sono sempre presentate per intero sullo schermo, spesso non possono essere completamente inserite nella finestra e vengono visualizzate solo in parte. Pertanto, si può notare che nelle tabelle HTML numero totale Poiché le celle non sono limitate e talvolta raggiungono diverse centinaia, il numero di fotogrammi in un documento è solitamente di diverse unità.

Creazione di cornici

I tag vengono utilizzati per creare frame.

Il descrittore forma insiemi di frame che dividono gli spazi delle finestre in righe e colonne. Quindi l'altezza e la larghezza di tutte le righe e colonne vengono impostate come percentuale delle dimensioni correnti della finestra del browser, in pixel o come asterisco. Il simbolo dell'asterisco indica che le dimensioni dei frame dipendono dalle dimensioni degli altri frame sulla pagina.

Il descrittore definisce la struttura e il contenuto di un particolare frame.

Di seguito è riportato un esempio del codice della pagina.

Un esempio di lavoro con i frame

Vantaggi e svantaggi dei telai

I vantaggi dei frame includono quanto segue:

  • possono visualizzare contemporaneamente varie informazioni in un'unica finestra;
  • con il loro utilizzo è possibile visualizzare in modo permanente alcune informazioni (loghi), senza la necessità di inserirle in ogni pagina del sito;
  • aiutano a creare una navigazione flessibile del sito.

Gli svantaggi dei frame includono:

  • il loro vantaggio principale (visualizzazione delle informazioni in una finestra), poiché l'area accessibile della pagina Web a questo riguardo diventa significativamente più piccola;
  • scegliere la giusta dimensione del frame durante la creazione è spesso difficile, poiché l'utente deve scorrere costantemente il frame utilizzando le barre di scorrimento;
  • sui monitor con risoluzioni basse, la quantità di informazioni visibili è notevolmente inferiore;
  • Molti motori di ricerca e directory rifiutano di registrare le pagine che utilizzano i frame.

Nota 2

Un altro svantaggio è che alcuni browser non possono elaborare i frame. In questo caso, davanti all'utente appare solo una schermata vuota. Per aiutare l'utente in questa situazione, è stato progettato un tag che consente di visualizzare il testo inserito tra i tag di apertura e chiusura quando la cornice non può essere visualizzata.

Barre di scorrimento dei fotogrammi

Per impostazione predefinita, il browser visualizzerà le barre di scorrimento solo quando le informazioni non rientrano nelle dimensioni della cornice. Per fare ciò, l'attributo SCROLLING è impostato su uno dei valori sì (no), che consente al browser di nascondere sempre le barre di scorrimento o di mostrarle sempre. Nascondere le barre di scorrimento consente di aumentare la dimensione dell'area della cornice visibile. Allo stesso tempo, se i dati non rientrano nella finestra, diventeranno inaccessibili all'utente.

Modifica dei confini del frame

La modifica dei confini del frame può essere disabilitata, questo viene fatto utilizzando l'attributo NORESIZE. Questo attributo è utile da utilizzare quando è necessario impedire all'utente di modificare il layout della pagina originale. Per impostazione predefinita, all'utente viene data la possibilità di spostare i bordi della cornice a sua discrezione, può impostare nuove dimensioni dell'oggetto in modo da migliorare la visualizzazione un certo frammento dati. Nei casi in cui le cornici non hanno bordi visibili, ciò ne impedirà automaticamente il ridimensionamento. Utilizzando l'attributo BORDER di un tag, puoi modificare lo spessore delle linee del bordo della cornice. Per impostazione predefinita, il browser incornicia la cornice con una cornice grigia e uno spessore di 6 pixel. L'attributo BORDERCOLOR consente di modificare il colore del bordo. L'attributo FRAMEBORDER consente di nascondere i bordi di una cornice.

Per impostazione predefinita, il browser visualizza i frame con un margine di 10 pixel tra il testo e il bordo del frame.

L'attributo MARGINWIDTH specifica la larghezza dei margini sinistro e destro.

E l'attributo MARGINHEIGHT determina l'altezza dei margini superiore e inferiore.

Quando si impostano le dimensioni dei campi, è necessario utilizzare entrambi gli attributi, poiché il browser potrebbe ridurre automaticamente la dimensione dei campi non specificati al valore minimo.

Cornici galleggianti

I frame inattivi fanno parte di una pagina Web e non richiedono una pagina separata che li descriva. Per creare tali frame viene utilizzato un tag. L'attributo NAME di questo tag specifica il nome del frame mobile, che può essere successivamente utilizzato per definire un collegamento ipertestuale che apra la pagina corrispondente in questo frame. Gli attributi WIDTH e HEIGHT specificano le dimensioni del frame mobile, poiché l'utente non ha la possibilità di modificarle da solo.

I frame mobili sono attualmente supportati solo da Microsoft IE.

Di seguito è riportato un esempio del codice della pagina:

Esempio 1

Un esempio di lavoro con i frame

larghezza="350" altezza="300" align="sinistra">

Un esempio di lavoro con i frame

Un esempio di lavoro con i frame

Istruzioni

Linguaggio HTML(HyperText Markup Language - "linguaggio di markup ipertestuale") fornisce due tipi di frame. "Floating" è più flessibile e più facile da inserire in uno esistente. In generale, la costruzione che descrive l'inserimento di una finestra utilizzando una cornice mobile è simile alla seguente: Qui, il sito esistente (attributo src) viene specificato come origine dati per questo frame. Verrà aperto in un frame di 400 per 300, come indicato negli attributi larghezza e altezza. Puoi anche specificare la pagina del tuo sito nell'attributo src. In questo caso è sufficiente specificare un indirizzo relativo (cioè un indirizzo relativo alla pagina in cui è inserito il frame): In questo esempio, l'altezza del frame non è specificata, ma è presente un attributo id. Usandolo puoi utilizzando i CSS() imposta le dimensioni richieste per questa cornice:

Un altro tipo di frame - "classico" - richiede una pagina separata che conterrà una descrizione della struttura dei frame. I frame stessi verranno posizionati su pagine separate, forse anche su siti separati. Il codice HTML per una pagina contenitore di questo tipo per i frame potrebbe assomigliare a questo:




Nessun blocco ... E ... , richiesti per le pagine normali, non dovrebbero essere qui. In questo esempio, il tag contenitore di apertura contiene l'attributo rows - ciò significa che lo spazio della pagina deve essere diviso verticalmente e al primo frame verrà assegnata la parte superiore. Se sostituisci le righe con le colonne, la divisione sarà orizzontale. Il valore di questo attributo "*,*" indica che le proporzioni di divisione sono uguali: 50% ciascuna. Se specifichi, ad esempio, "20%,*", solo il 20% verrà assegnato al primo fotogramma e il resto dello spazio verrà assegnato al secondo. L'utente può modificare queste proporzioni trascinando i bordi di i fotogrammi con il mouse, ma è possibile vietare questa azione. Per fare ciò, devi aggiungere l'attributo noresize al tag di un frame specifico. Puoi anche specificare la dimensione dei margini verticali e orizzontali dal fotogramma adiacente (attributi marginwidth e marginheight): È possibile impostare separatamente le regole di comportamento per le barre di scorrimento di ciascun fotogramma. Questo viene fatto utilizzando l'attributo scrolling, che può contenere uno dei tre valori predefiniti. Se specifichi scrolling="auto", le barre di scorrimento appariranno quando il contenuto del frame non rientra nei suoi confini. Se "sì", le strisce saranno costantemente presenti, indipendentemente dal fatto che siano necessarie. Se "no" significa che le barre di scorrimento sono disabilitate per questo frame.

Sulla base delle informazioni presentate nei due passaggi precedenti, è necessario costruire il codice html più adatto a risolvere il problema. Dopodiché non resta che inserirlo nel codice sorgente della pagina. Per fare ciò, puoi utilizzare l'editor di pagine del tuo sistema di gestione del sito: aprilo pagina desiderata, passa alla modalità di modifica del codice html e incolla il codice nel punto desiderato della pagina. Puoi scaricare il file? codice sorgente pagina del file manager per la gestione dell'hosting o il sistema di gestione dei contenuti, aprila in un editor di testo e incolla il codice al suo interno. Quindi utilizzare lo stesso metodo per caricare nuovamente il codice modificato sul server.

Creare un documento HTML basato su una struttura a frame è abbastanza semplice. Questa pagina verrà visualizzata come finestre di dialogo, ognuno dei quali carica un documento separato.

Ne avrai bisogno

Istruzioni

La struttura del frame del documento significa che ogni pagina è composta da aree separate, ognuna delle quali visualizza un file HTML. Quindi, per prima cosa, apri un editor di testo come Blocco note e crea il corpo del documento utilizzando i tag BODY e /BODY.

Un documento frame è racchiuso tra due tag FRAMESET e /FRAMESET. Qui verrà posizionata una sorta di tabella, in ciascuna colonna della quale è possibile caricare un documento separato. Utilizzando le due proprietà COLS e ROWS, puoi impostare la dimensione di una colonna e di una riga in pixel o come percentuale della dimensione della finestra del browser (se inserisci un asterisco al posto dei numeri, verrà utilizzato tutto spazio libero navigatore).

Per progettare la struttura, utilizzare le seguenti proprietà:1) FRAMEBORDER=1 - ogni fotogramma ha una cornice tridimensionale;2) FRAMEBORDER=0 - non ci sarà alcun fotogramma;3) FRAMESPACING - la distanza tra fotogrammi adiacenti in pixel;4 ) FRAME - /FRAME - definisce il contenuto di un frame separato: a) SRC - file HTML con il contenuto del frame; b) MARGINHEIGHT, MARGINWIDTH - specifica l'offset verticale e orizzontale dai limiti del frame in pixel; c) NORESIZE - l'utente non può ridimensionare il frame; d) SCROLLING - se è necessario (SI) o meno (NO) creare delle barre di scorrimento per visualizzare il fotogramma; il valore AUTO le crea solo se necessario.

Una finestra del browser può essere divisa in parti chiamate frame, a volte frame; Puoi anche chiamarli davanzali. In ciascuna di queste parti della finestra del browser, ad es. frame, è possibile caricare un documento HTML separato. Diamo un'occhiata ad un esempio di una finestra del browser con tre frame.

In questo caso, per chiarezza, ogni frame viene caricato con un semplice documento HTML indicante il numero del frame e il nome del file che ne memorizza il contenuto. Se nel frame viene caricato un documento reale, che non rientra completamente al suo interno, allora il frame (attenzione, non l'intera finestra!) avrà barre di scorrimento verticali e/o orizzontali a seconda che il contenuto non entri orizzontalmente e/o o documento verticalmente.
Ad esempio, il design e la struttura del tuo sito sono tali che ci sono gli stessi elementi ripetuti su ogni pagina del sito: il titolo, il menu di navigazione, l'indirizzo alla fine della pagina o altri elementi simili. Cambia solo il contenuto delle sezioni. Quindi le pagine possono essere divise in parti in modo che le parti immutabili siano posizionate in frame separati e un altro frame può essere allocato in modo che il contenuto venga caricato al suo interno la sezione desiderata dopo aver cliccato sull'apposito collegamento, ad esempio da un menu.
Ciò consente di risparmiare sulla velocità di caricamento, poiché le parti identiche delle pagine del sito non vengono ricaricate, ma vengono semplicemente visualizzate continuamente nei frame ad esse assegnati.

Creazione di un elemento della struttura del telaio FRAMESET

La struttura del layout della finestra è memorizzata in un documento HTML separato, chiamato documento con cornice. La struttura del telaio è realizzata mediante uno speciale elemento FRAMESET. Un documento normale ha una sezione HEAD e una sezione BODY, mentre in un documento con frame, la sezione BODY è sostituita da una descrizione della struttura dei frame, cioè Sezione FRAMESET.
È possibile aggiungere un elemento NOFRAME alla sezione FRAMESET con contenuto alternativo da visualizzare nei browser che non supportano i frame o nei browser che non supportano i frame. Tali browser semplicemente non capiranno le strutture FRAMESET e NOFRAME, ma visualizzeranno il testo inserito al loro interno.

Documento semplice con cornici</ТIТLЕ> </span> </HEAD> <FRAМESET > <span>...descrizione della struttura del telaio...</span> <NOFRAМES> <span>Contenuti alternativi per i browser che non supportano i frame</span> </NOFRAМES> </FRAМESET> </HТМL> <p>Tieni presente che la sezione BODY manca completamente dal documento e l'elemento NOFRAMES è contenuto nella sezione FRAMESET. <br>La struttura stessa del frame è formata dividendo la finestra del browser in parti: righe e colonne; In una certa misura questo non sembra creare tabelle. Per fare ciò, l'elemento FRAMESET ha attributi cols e rows, che specificano rispettivamente la divisione in colonne e righe. <br>Le unità di misura in cui è possibile impostare le dimensioni dei fotogrammi sono, come al solito, pixel e percentuali. C'è anche la possibilità di impostare la dimensione in un'unità di misura per noi nuova, che può essere definita approssimativamente una “parte” della finestra. I valori degli attributi cols e rows vengono specificati elencando le dimensioni delle aree corrispondenti, separate da virgole. Può essere combinato <a href="https://pzik.ru/it/sposoby-vklyucheniya-bluetooth-na-raznyh-versiyah-windows-kak-vklyuchit/">modi diversi</a> incarichi. Diamo un'occhiata ad alcuni esempi, partendo dal presupposto che la dimensione della finestra del browser sia 800x600 pixel.</p> <FRAМESET rows= "50%, 50%"> </FRAМESET> <p>Questo codice dividerà la finestra orizzontalmente in due cornici (righe) di uguale altezza. Se imposti l'attributo cols="50%, 50%", otterrai due colonne di uguale larghezza.</p> <span><FRAМESET cols= "120, 400. *"> </span> <span>. . . continuando a definire la struttura del telaio. . .</span> </FRAМESET> <p>Con questo codice otteniamo tre colonne di frame: quella di sinistra è larga 120 pixel, quella centrale è larga 400 pixel e la terza colonna contiene tutto ciò che rimane delle prime due colonne nell'attributo indicato da questo valore; simbolo asterisco “*”.</p> <FRAМESET cols= "1*, 4*"> <span>. . . continuando a definire la struttura del telaio. . .</span> </FRAМESET> <p>Questo codice creerà due colonne di frame. La larghezza del primo è considerata pari a uno (questo è indicato come 1 * o semplicemente *), la larghezza del secondo è quattro volte maggiore. Pertanto, la larghezza del primo sarà pari al 20% e la larghezza del secondo sarà pari all'80% della larghezza totale della finestra del browser.</p> <span><FRAМESET cols= "100, 40%, *"> </span> <span>. . . continuando a definire la struttura del telaio...</span> </FRAМESET> <p>La misura di cui sopra combina tutti e tre i metodi per specificare le dimensioni. La larghezza della prima colonna sarà di 100 pixel, alla seconda verrà assegnato il 40% della larghezza rimanente (800 - 100 = 700) e alla terza sarà tutto ciò che non è occupato dalla prima e dalla seconda colonna. <br>Una sezione FRAMESET può contenere sezioni FRAMESET nidificate, consentendo di creare una struttura frame abbastanza complessa. Diciamo che dobbiamo dividere la finestra in 4 frame come segue:</p> <p><img src='https://i1.wp.com/samsebewebmaster.ru/wp-content/uploads/2016/06/Fr-1.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>Per prima cosa devi organizzare 2 colonne in questo modo:</p> cols= "100, * " <p>Quindi dividi la seconda colonna in tre righe in questo modo:</p> righe="80, *, 30" <p>Un frame separato, o meglio la sua descrizione, è specificato dall'elemento FRAME e dai suoi attributi: ne parleremo più avanti. Torniamo agli elementi FRAMESET nidificati. Diamo un'occhiata ad alcuni esempi di codice che creano una struttura frame come questa:</p> <FRAМESET cols= "100, * "> <span> <FRAМE name= "framel" src= "framel.html"> </span> <span> <FRAМESET rows= "80, *, 30"> </span> <span> <FRAМE name= "frame2" src= "frame2.html"> </span> <span> <FRAМE name= "frame3" src= "frame3.html"> </span> <span> <FRAМE name= "frame4" src= "frame4.html"> </span> </FRAМESET> </FRAМESET> <p>Sembra che abbiamo capito come è divisa una finestra in cornici. Quando crei le cornici, puoi assicurarti che il bordo tra le cornici non sia visibile. Come probabilmente hai già intuito, questo viene fatto utilizzando l'attributo border, il cui valore dovrebbe essere zero. Ma il fatto è che per i frame questo attributo non viene percepito dal browser <a href="https://pzik.ru/it/problemy-sberbank-ast-pri-dobavlenii-ne-vidit-sberbank-ast-kak/">Internet Explorer</a>, ma è supportato dal browser Netscape Navigator. Per Internet Explorer, il bordo tra i frame è specificato dall'attributo frameborder, che non è supportato dal browser Netscape Navigator. Si scopre che è necessario chiedere <a href="https://pzik.ru/it/pokazat-odinakovye-znacheniya-v-excel-kak-v-eksele-vydelit-povtoryayushchiesya/">stessi valori</a> per entrambi gli attributi, in modo che entrambi i browser percepiscano il codice HTML allo stesso modo e lo spessore dei bordi tra i frame sia lo stesso. <br>Lo spessore dei bordi o, in altre parole, la distanza tra i fotogrammi può essere regolata anche utilizzando l'attributo framespacing, il cui valore è specificato in pixel. Tutti gli attributi dell'elemento FRAMESET sono mostrati nella tabella.</p> <h2>Attributi dell'elemento <FRAMESEТ></h2> <table cellspacing="1" cellpadding="15"><tbody><tr><td bgcolor="#E7E7E7" width="20%"> <h3>Attributo</h3> </td> <td bgcolor="#E7E7E7" width="60%"> <h3>Descrizione</h3> </td> <td bgcolor="#E7E7E7" width="20%"> <h3>Esempio</h3> </td> </tr></tbody></table><table cellspacing="1" cellpadding="15"><tbody><tr><td bgcolor="#E7E7E7" width="20%">righe</td> <td bgcolor="#E7E7E7" width="60%">Definisce il numero e la dimensione dei frame orizzontali (frame di linea) nella finestra del browser. Il valore è un elenco separato da virgole di dimensioni dei frame. Metodi per impostare le dimensioni: <p>a) in percentuale dell'altezza <a href="https://pzik.ru/it/specifichnoi-dlya-okna-programmy-microsoft-excel-yavlyaetsya-elementy-okna/">zona di lavoro</a> finestra del browser ad esempio: "30%, 30%, 40%" ;</p> <p>b) sotto forma del segno “*” (asterisco), indicando che il frame occupa tutto lo spazio libero della finestra del browser che non è occupato da altri frame con dimensioni esplicitamente specificate, ad esempio, l'asterisco nella voce “25 %, 25%, *” equivale a 50%;</p> <p>c) in pixel ad esempio: "75, *" .</p> <p>Tutti e tre i metodi possono essere combinati.</p> </td> <td bgcolor="#E7E7E7" width="20%">righe = "25%, 25%, *"</td> </tr><tr><td bgcolor="#E7E7E7" width="20%">col</td> <td bgcolor="#E7E7E7" width="60%">Determina il numero e la dimensione dei frame verticali (frame delle colonne) nella finestra del browser. Come valore <br>viene specificato un elenco separato da virgole di dimensioni dei frame. Le dimensioni vengono impostate allo stesso modo del precedente parametro ROWS.</td> <td bgcolor="#E7E7E7" width="20%">cols= "265, *"</td> </tr><tr><td bgcolor="#E7E7E7" width="20%">confine</td> <td bgcolor="#E7E7E7" width="60%">Specifica la larghezza dei bordi della cornice in pixel. <a href="https://pzik.ru/it/pochemu-smartfon-ne-prinimaet-mms-kak-nastroit-gadzhet-pod-upravleniem/">Questo parametro</a> Funziona solo con i browser Netscape.</td> <td bgcolor="#E7E7E7" width="20%">Bordo="0"</td> </tr><tr><td bgcolor="#E7E7E7" width="20%">frameborder</td> <td bgcolor="#E7E7E7" width="60%">Questo parametro è valido solo nei browser Internet Explorer e determina la presenza di frame per i frame contenuti all'interno dell'elemento FRAMESET. Valori possibili: Sì cornici di visualizzazione; No o 0 non visualizzano i fotogrammi.</td> <td bgcolor="#E7E7E7" width="20%">Frameborder="0"</td> </tr><tr><td bgcolor="#E7E7E7" width="20%">spaziatura dei fotogrammi</td> <td bgcolor="#E7E7E7" width="60%">Definisce la distanza (la cosiddetta "zona grigia") tra i fotogrammi in pixel. Questa opzione è necessaria anche per creare cornici senza bordi.</td> <td bgcolor="#E7E7E7" width="20%">spaziatura fotogrammi = "0"</td> </tr></tbody></table><p>Torniamo ora all'elemento FRAME, che descrive un singolo frame all'interno dell'intera struttura. Un parametro richiesto è l'attributo src, che specifica l'URL HTML del documento o dell'immagine da visualizzare in questo frame. È anche meglio dare un nome al frame usando l'attributo name. Ciò ti consentirà di utilizzare questo nome come valore dell'attributo target dell'elemento A e di controllare in quale frame deve essere caricato il collegamento. I nomi dei frame non possono iniziare con numeri; come caratteri iniziali sono consentite solo lettere dell'alfabeto latino (az, AZ).</p> <p>Quando una struttura di frame non definisce un confine tra i frame, i loro contenuti potrebbero essere troppo adiacenti l'uno all'altro, il che non sembrerebbe molto bello. Se si desidera espandere il contenuto dei frame e tuttavia non includere la visualizzazione dei confini tra di loro, è possibile farlo impostando i rientri all'interno dei frame. La dimensione di questi rientri è impostata in pixel e in coppie: per i rientri in alto e in basso con l'attributo marginheight, <br>e per i rientri a destra e a sinistra con l'attributo marginwidth. Quindi la distanza tra il contenuto dei frame adiacenti sarà uguale alla somma dei corrispondenti rientri di questi frame.</p> <p>Se un frame deve visualizzare un bordo attorno a un particolare frame è determinato dal suo attributo frameborder. Il valore sì (o 1) indica che dovrebbe esserci un bordo, il valore no (o 0) indica che non dovrebbe esserci un bordo. <br>L'utente può ridimensionare i frame creati dal documento HTML. Per fare ciò, basta spostare il cursore del mouse sul bordo dei fotogrammi (non importa se questi bordi sono visibili o meno) e utilizzare lo standard <a href="https://pzik.ru/it/hacking-android-mobile-operating-systems/">sistema operativo</a> modo per ridimensionare la finestra. <br>IN <a href="https://pzik.ru/it/kak-izmenit-skorost-peremeshcheniya-ukazatelya-myshi-po-ekranu-kak/">Cursore di Windows</a> il pulsante del mouse apparirà come una freccia nera a due punte. Facendo clic <a href="https://pzik.ru/it/nazhat-levuyu-knopku-myshi-na-klaviature-samye-poleznye/">pulsante sinistro</a> mouse, puoi spostare il bordo della finestra. Allo stesso modo puoi modificare la dimensione della cornice, poiché una cornice è anche una finestra. Se hai calcolato le dimensioni dei tuoi frame e non vuoi che l'utente le modifichi, imposta l'attributo noresize. Di conseguenza, il ridimensionamento sarà vietato. <br>Come abbiamo detto in precedenza, le barre di scorrimento appaiono su una cornice se il suo contenuto non rientra completamente nei limiti specificati. La presenza delle barre di scorrimento è controllata dall'attributo scrolling. I tre valori consentiti sono sì, no e auto. <br>Il valore automatico fa sì che le barre di scorrimento vengano visualizzate automaticamente nei casi in cui sono realmente necessarie. Se il contenuto è comunque visibile non ci sono barre di scorrimento; se parte del contenuto non entra, appare la barra di scorrimento richiesta. <br>Un valore sì abilita entrambe le barre di scorrimento, indipendentemente dal fatto che siano necessarie o meno. A volte potrebbe non sembrare molto carino. <br>Il valore no impedisce del tutto la visualizzazione delle barre di scorrimento. Fare attenzione a questo valore perché specificandolo potrebbe impedire all'utente di vedere l'intero contenuto del frame quando non rientra completamente nel frame. Tutti gli attributi dell'elemento FRAME sono mostrati nella tabella.</p> <h2>Attributi dell'elemento <FRAME></h2> <table cellspacing="1" cellpadding="15"><tbody><tr><td bgcolor="#E7E7E7" width="20%"> <h3>Attributo</h3> </td> <td bgcolor="#E7E7E7" width="60%"> <h3>Descrizione</h3> </td> <td bgcolor="#E7E7E7" width="20%"> <h3>Esempio</h3> </td> </tr></tbody></table><table cellspacing="1" cellpadding="15"><tbody><tr><td bgcolor="#E7E7E7" width="20%">src</td> <td bgcolor="#E7E7E7" width="60%">Parametro obbligatorio. Specifica l'indirizzo HTL (URL) <br>file visualizzato in questo riquadro</td> <td bgcolor="#E7E7E7" width="20%">src="frame2.html"</td> </tr><tr><td bgcolor="#E7E7E7" width="20%">nome</td> <td bgcolor="#E7E7E7" width="60%">Definisce il nome di questo frame, che verrà successivamente utilizzato per farvi riferimento da altri documenti utilizzando l'attributo target (vedi elemento A). Il valore deve essere un nome qualsiasi senza spazi <a href="https://pzik.ru/it/pridumat-parol-iz-8-simvolov-i-latinskie-kak-sostavit-nadezhnyi/">caratteri latini</a> e numeri <br>(i caratteri iniziali possono essere solo lettere dell'alfabeto latino: a-z, A-Z). Il nome non deve iniziare con numeri e <a href="https://pzik.ru/it/chto-takoe-url-adres-i-kak-s-nim-rabotat-chto-takoe-uri-url-urn-i-chem-oni/">caratteri speciali</a>. I nomi dei frame riservati iniziano con un carattere di sottolineatura.</td> <td bgcolor="#E7E7E7" width="20%">nome="menu1"</td> </tr><tr><td bgcolor="#E7E7E7" width="20%">larghezza del margine</td> <td bgcolor="#E7E7E7" width="60%">Specifica la larghezza (in pixel) dei margini sinistro e destro del fotogramma. Se il parametro non è specificato, il browser lo determinerà automaticamente <a href="https://pzik.ru/it/fail-podkachki-windows-7-optimalnyi-razmer-optimalnyi-razmer-faila/">dimensione ottimale</a> rientranza.</td> <td bgcolor="#E7E7E7" width="20%">larghezza margine="0"</td> </tr><tr><td bgcolor="#E7E7E7" width="20%">marginheight</td> <td bgcolor="#E7E7E7" width="60%">Specifica la larghezza (in pixel) dei margini superiore e inferiore della cornice. Se il parametro non è specificato, il browser determinerà automaticamente la dimensione ottimale del rientro.</td> <td bgcolor="#E7E7E7" width="20%">altezzamargine="0"</td> </tr><tr><td bgcolor="#E7E7E7" width="20%">scorrimento</td> <td bgcolor="#E7E7E7" width="60%">Determina se il contenuto del frame dispone di barre di scorrimento. Valori possibili: <br>sì: visualizza le barre di scorrimento; <br>no: non visualizza le barre di scorrimento; <br>automatico: visualizza le barre di scorrimento se necessario (se il documento specificato nel parametro SRC non rientra nel riquadro)</td> <td bgcolor="#E7E7E7" width="20%">scorrimento= "automatico"</td> </tr><tr><td bgcolor="#E7E7E7" width="20%">noresize</td> <td bgcolor="#E7E7E7" width="60%">Non consente il ridimensionamento del frame. Questo parametro è un flag e non richiede un valore.</td> <td bgcolor="#E7E7E7" width="20%">noresize</td> </tr><tr><td bgcolor="#E7E7E7" width="20%">frameborder</td> <td bgcolor="#E7E7E7" width="60%">Determina se una cornice ha bordi. Valori possibili: <br>sì o 1: cornici di visualizzazione; <br>no o 0: non visualizza i fotogrammi.</td> <td bgcolor="#E7E7E7" width="20%">frameborder= "0"</td> </tr></tbody></table> <p>I frame sono elementi HTML che consentono di dividere una finestra del browser Web in più finestre indipendenti, ciascuna delle quali può caricare un documento HTML separato. Ciascuna di queste finestre (frame) può avere le proprie barre di scorrimento e funzionare indipendentemente dalle altre finestre indipendenti o, al contrario, controllarne il contenuto. Possono essere utilizzati per organizzare un menu che si trova costantemente in una finestra, mentre le informazioni stesse si trovano in un'altra finestra. Gli utenti possono accedere al menu in qualsiasi momento e non devono tornare alla pagina precedente per selezionare un'altra voce di menu. L'uso dei frame consente di “bloccare” immagini o altri elementi statici dell'interfaccia nella finestra del browser mentre il resto della pagina scorre all'interno del frame. <br>Tuttavia, vale la pena notare che oggigiorno i frame sono considerati uno strumento obsoleto e i siti con frame sono considerati poco dignitosi, poiché i webmaster professionisti non utilizzano mai i frame nei loro progetti. Ci sono una serie di cose tristi associate ai frame. <a href="https://pzik.ru/it/pokemon-go-kak-zahvatit-gym-i-ne-poteryat-zdorove-pokemon-go-ne-rabotaet-reshaem/">problemi noti</a>. Confondono i motori di ricerca, ad esempio, perché le pagine che contengono il contenuto non si collegano ad altri documenti. Se desideri ricevere visitatori da <a href="https://pzik.ru/it/kakaya-samaya-luchshaya-poiskovaya-sistema-poiskovye-sistemy-rossii-i-lidiruyushchie/">motori di ricerca</a>, dimentica le cornici. È impossibile per un utente inserire la pagina che gli piace nella sezione dei segnalibri del browser, poiché i frame nascondono l'indirizzo della pagina in cui si trova e mostrano sempre solo l'indirizzo del sito web. Per questo motivo creano problemi ai browser durante il monitoraggio della cronologia e non sono molto adatti <a href="https://pzik.ru/it/polnaya-nastroika-faila-podkachki-windows-fail-podkachki-i-pravilnye-razmery-dlya/">dimensioni diverse</a> schermi e dispositivi mobili. <br>Nonostante il fatto che i progetti con frame stiano diventando sempre meno comuni sul World Wide Web, <a href="https://pzik.ru/it/kursy-html-i-css-s-nulya-luchshie-resursy-dlya-izucheniya-html-i-css-ya/">imparare l'HTML</a> sarebbe incompleto senza discutere l'argomento dei frame. I telai, insieme ai loro svantaggi, presentano anche alcuni vantaggi che non ci consentono di liquidare questa tecnologia come poco promettente.</p> <h2>Creazione di cornici</h2> <p>La struttura di un documento HTML con frame è molto simile nell'aspetto al formato di un normale documento HTML. Come in un normale documento HTML, tutto il codice viene inserito tra tag accoppiati <b><html> </b> E <b></html> </b> e nel contenitore <b><head> </b> si trovano le intestazioni. La differenza principale tra un documento con cornici e un normale documento HTML è che un documento con cornici invece di un tag <b><body> </b> viene applicato il tag abbinato <b><frameset> </b>(dal set di cornici inglesi - una serie di cornici). <br>L'esempio seguente mostra la struttura di un documento HTML con frame:</p> <h3>Esempio: struttura del documento HTML con frame</h3> <ul><li>Provalo tu stesso »</li> </ul><table style="border-collapse:collapse;"><tr><td style="border-bottom: 4px solid silver;background-color:blue;color: white;" colspan="2">frame_top</td> </tr><tr><td style="border-right: 4px solid silver;width: 20%;background-color:green;color: white;">frame_sinistra</td> <td style="width: 80%;background-color:lime;color: white;">frame_right</td> </tr></table><p> <!DOCTYPE html> <html><br><head><br><meta charset="UTF-8"> <title>Documento con cornici

Nell'esempio sopra, la pagina contiene tre aree, ciascuna delle quali è inizialmente caricata con documenti HTML frame_top.html, frame_left.html e frame_right.html. Oltre ai documenti HTML, una cornice può contenere anche elementi grafici. Per fare ciò, è necessario specificare l'indirizzo dell'immagine corrispondente nell'attributo src, Per esempio src="immagine.gif". Si prega di notare che l'elemento usato senza cartellino di chiusura.
All'interno del contenitore può contenere solo tag o altro insieme di fotogrammi coperti da tag E .
Etichetta ha i seguenti attributi:

  • righe— descrive come dividere una pagina in righe:
  • col— descrive come una pagina è divisa in colonne:
Le aree risultanti da questa suddivisione della pagina saranno frame. L'assenza di questi attributi definisce un singolo frame che occuperà l'intera finestra del browser.

Nel significato degli attributi righe E colÈ necessario indicare non il numero di righe o colonne, ma la larghezza e l'altezza dei fotogrammi. Tutti i valori nell'elenco sono separati da virgole. Le dimensioni possono essere specificate in unità assolute (pixel) o percentuali:

  • cols="20%, 80%"— la finestra del browser è divisa in due colonne utilizzando l'attributo col, la colonna di sinistra occupa il 20% e quella di destra l'80% della finestra del browser.
  • righe="100, *" La finestra del browser è divisa in due finestre orizzontali utilizzando l'attributo righe, la finestra superiore occupa 100 pixel e la finestra inferiore occupa lo spazio rimanente specificato dal simbolo asterisco.

Come si può vedere da questo esempio, contenitore con attributo righe prima crea due fotogrammi orizzontali e sostituisce il secondo fotogramma con un altro che divide il frame orizzontale inferiore in due colonne utilizzando l'attributo col, la colonna di sinistra occupa il 20% e quella di destra l'80% della finestra del browser.
Se il browser non supporta i frame, la finestra visualizzerà il testo situato tra i tag </b> E <b> . Tutto tra i tag </b> E <b> , viene ignorato dai browser che supportano i frame. Pertanto, lo sviluppatore deve scrivere codice che duplica il contenuto dei frame con altri mezzi e inserire questo codice in un contenitore </b>, tutti gli utenti potranno visualizzarne la pagina web. <br>Come già notato, un tag non accoppiato viene utilizzato per inserire una cornice separata in un documento <b><frame> </b>. Attributo <b>src</b> specifica il documento che deve essere visualizzato all'interno di questo frame, ad esempio: <frame src="frame_top.html">. Se attributo <b>src</b> mancante, viene visualizzata una cornice vuota.</p> <h2>Bordi o spazio tra i fotogrammi</h2> <p>Per impostazione predefinita, il browser visualizza un bordo grigio, solitamente 3D, tra i frame che i visitatori possono utilizzare per regolare le dimensioni del frame. <br>Il bordo della cornice può essere manipolato come qualsiasi altro elemento della cornice. Ci sono diversi attributi dell'elemento per questo <b><frameset> </b>, consentendoti di personalizzare i bordi delle cornici. Lo spessore della linea del bordo è determinato dall'attributo <b>confine</b>. Il valore predefinito dello spessore del bordo è cinque. <br>Per nascondere il bordo di una cornice, è necessario impostare il valore della larghezza del bordo su zero oppure impostare il valore "no" o "0" nell'attributo <b>frameborder</b>. Attributo <b>frameborder</b> può assumere solo due significati opposti. Se il valore dell'attributo <b>frameborder</b>è uguale a “sì” o “1”, verrà visualizzato il bordo della cornice e se “0” o “no”, allora no. Tieni presente che i valori degli attributi <b>frameborder</b> variare per <a href="https://pzik.ru/it/kak-dobavit-stranicu-v-vizualnye-zakladki-yandeks-dobavlenie/">browser diversi</a>. Per risolvere questo problema utilizzare l'attributo due volte <b>frameborder</b>, e per alcuni browser è necessario aggiungere anche l'attributo <b>spaziatura dei fotogrammi</b> con valore "0":</p><p> <frameset frameborder="0" framespacing="0" frameborder="no" border="0"> </p><p>Nell'esempio seguente rimuoviamo il bordo tra i frame:</p> <h3>Esempio: rimozione del bordo tra i fotogrammi</h3> <ul><li>Provalo tu stesso »</li> </ul><table><tr><td style="width: 10px;background-color:green;color: white;">frame_sinistra</td> <td style="width: 90%;background-color:lime;color: white;">frame_right</td> </tr></table><p> <!DOCTYPE html> <html><br><head><br><meta charset="UTF-8"> <title>Cornici senza bordi</title> </head> <frameset cols="100,*" frameborder="0" framespacing="0" frameborder="no" border="0"> <frame src="frame_left.html" name=" frame_left" > <frame src="frame_right.html" name="frame_right" > </frameset> </html></p> <p>Se rimuovi il bordo tra i frame, i visitatori non potranno ridimensionare il frame nel browser. Puoi anche impedire il ridimensionamento della cornice preservando i bordi utilizzando l'attributo <b>noresize</b>:</p><p> <frame src="frame_left.html" noresize> </p><p>Utilizzo dell'attributo <b>bordercolor</b> Puoi cambiare il colore del bordo della cornice, devi solo specificare il codice o il nome del colore riservato corrispondente. <br>Di seguito è riportato un esempio di pagina HTML che contiene gli attributi di controllo del bordo del frame descritti sopra: il colore del bordo è rosso, la dimensione del frame superiore non può essere modificata:</p> <h3>Esempio: controllo del bordo del frame</h3> <ul><li>Provalo tu stesso »</li> </ul><table style="border-collapse:collapse;"><tr><td style="border-bottom: 4px solid red;background-color:blue;color: white;" colspan="2">frame_top</td> </tr><tr><td style="border-right: 4px solid red;width: 20%;background-color:green;color: white;">frame_sinistra</td> <td style="width: 80%;background-color:lime;color: white;">frame_right</td> </tr></table><p> <!DOCTYPE html> <html><br><head><br><meta charset="UTF-8"> <title>Gestione dei bordi del frame</title> </head> <frameset rows="150, *" border="10" bordercolor="red" frameborder="1" frameborder="yes"> <frame src="frame_top.html" noresize> <frameset cols="20%, 80%"> <frame src="frame_left.html"> <frame src="frame_right.html"> </frameset> </frameset> </html></p> <p>Se vuoi posizionare la pagina visualizzata all'interno della cornice più vicino ai suoi bordi, o, al contrario, allontanarla, modifica gli attributi <b>marginheight</b> E <b>larghezza del margine</b> etichetta <b><frame> </b>. Attributo <b>marginheight</b> definisce il riempimento tra il contenuto del frame e i suoi bordi superiore e inferiore. Sintassi:</p><p> <frame marginheight="число"> </p><p>Attributo <b>larghezza del margine</b> definisce il riempimento tra il contenuto del frame e i suoi bordi destro e sinistro. Sintassi:</p><p> <frame marginwidth="число"> </p><p>Questa riga html, ad esempio, posiziona la pagina visualizzata vicino al bordo del frame:</p> <p>Se la pagina visualizza una barra di scorrimento che non desideri, puoi risolvere il problema specificando l'attributo <b>scorrimento</b>="no" nel tag <b><frame> </b>. Tieni però presente che se il frame non è abbastanza grande da visualizzare l'intero contenuto della pagina, il visitatore non avrà modo di scorrere la pagina visualizzata.</p> <h2>Collegamenti all'interno dei frame</h2> <p>Per seguire un collegamento in un normale documento HTML, fare clic sul collegamento e il documento corrente verrà sostituito con uno nuovo nella finestra corrente o in una nuova finestra del browser. Quando si utilizzano i frame, lo schema di caricamento dei documenti HTML è diverso dal solito e la differenza principale è la possibilità di caricare un documento HTML in un frame da un altro frame. <br>Per caricare un documento in un frame specifico, utilizzare l'attributo <b>bersaglio</b> etichetta <b><a> </b>. Come valore di attributo <b>bersaglio</b> viene utilizzato il nome del frame in cui verrà caricato il documento specificato dall'attributo <b>nome</b> etichetta <b><frame> </b>. Vale anche la pena notare che il nome del frame deve iniziare con un numero o con una lettera latina. I seguenti nomi vengono utilizzati come nomi riservati:</p> <p>Per i collegamenti esterni, dovresti impostare l'attributo target su _top o _blank per garantire che i progetti di terze parti non appaiano nei frame, ma piuttosto riempiano l'intera finestra del browser.</p> <p>L'esempio seguente mostra un documento HTML in cui il frame destro carica una pagina da un collegamento posizionato nel frame superiore. Link al documento che si aprirà nel frame di destra:</p><p> <a href="http://www.google.com" target="frame_right">Google</a> </p><p>Al frame destro viene assegnato un nome <i>frame_right</i>:</p><p> <frame src="frame_right.html" name="frame_right"> </p><p>Per caricare un documento in un frame specificato, utilizzare il costrutto <i>target="frame_destra"</i>, come mostrato nell'esempio:</p> <h3>Esempio: collegamento a un altro frame</h3> <ul><li>Provalo tu stesso »</li> </ul><p> <!DOCTYPE html> <html><br><head><br><meta charset="UTF-8"> <title>Collegamento a un altro frame</title> </head> <frameset rows="100, *"> <frame src="frame_topic.html"> <frameset cols="20%, 80%"> <frame src="frame_left.html"> <frame src="frame_right.html" name="frame_right"> </frameset> <noframes> <p>Il tuo browser non visualizza i frame</p>

Cornici galleggianti

Elemento

Sicuramente hai sentito parlare più di una volta di un concetto come i frame. Puoi leggerli in qualsiasi libro di testo HTML, nonché nelle risorse sulla creazione di siti Web. Dopo aver studiato tanti esempi e descrizioni, ho deciso di raccontare tutto sulle cornici con parole mie in una forma molto semplice. I pro, i contro e il futuro dei telai saranno discussi in fondo a questa pagina. Quindi, cosa sono i frame in HTML?

Cosa sono i frame in html

Telaio(Cornice inglese) - qualche area indipendente collegabile su una pagina web.

Non allarmarti se questo sembra un po' confuso. Facciamo subito l'esempio più semplice e poi tutto diventerà chiaro.

Apri la guida in qualsiasi programma (potrebbe essere il blocco note, qualche programma, browser, ecc.). Quasi sempre vedrai una guida composta da due parti (navigazione a sinistra, contenuto a destra). Le parti sinistra e destra sono solo fotogrammi separati. Di seguito uno screenshot tratto dall'aiuto del più comune blocco note di Windows:

Fig 1. Utilizzo dei frame utilizzando la guida del blocco note come esempio

Ciò che vedi è una pagina web composta da due frame separati e indipendenti. Facciamo un esempio codice html un tale frame dall'aiuto.

Esempio con frame n. 1 (fare aiuto)

Nel framework di cui sopra, l'aiuto discusso sopra sarà simile a questo:


Fig 2. Struttura per l'utilizzo dei telai ad esempio n. 1

Dividere una pagina in aree utilizzando i frame è molto simile al layout della tabella HTML (vedi tag della tabella HTML). Un codice di esempio per una pagina di questo tipo potrebbe assomigliare a questo:

<span>Esempio n.1 di una pagina html con frames</span>
Spiegazione per esempio n. 1

Come puoi vedere dal codice qui sopra, una pagina creata da frames è molto simile ad una normale pagina html: c'è un tag html di apertura, una sezione , titolo , ma c'è una grande differenza. Probabilmente hai notato che manca il tag body, responsabile del corpo della pagina. Al suo posto viene inserito il tag <frameset>, che è responsabile del corpo della pagina. Questo tag ha due attributi cols="25%,75%" , il che significa dividere l'intero corpo della pagina in due aree verticali con un rapporto 1:3. La prima area occuperà il 25% della larghezza dell'intero schermo (conterrà il primo frame menu.html), la seconda area occuperà il 75% della larghezza dell'intero schermo (conterrà il secondo contenuto. cornice html).</p> <p>L'ultimo tag completamente facoltativo è <noframes>. È necessario per i browser che non supportano i frame. Se il browser non supporta i frame, si consiglia di informarne educatamente l'utente tramite questo tag.</p> <p>A proposito, tienilo presente per il tag <frame>non è necessario alcun tag di chiusura.</p> <p>Spero che ora tu abbia un'idea sulle cornici. Per comprendere esempi più difficili, proviamo a creare una semplice pagina html composta da 4 frame. Questo sarà l'esempio n. 2.</p> <h2>Esempio con 4 fotogrammi #2</h2> <p>Quadro per esempio 2:</p> <p><img src='https://i1.wp.com/zarabotat-na-sajte.ru/uroki-html/img/primer2-frame-karkas.jpg' width="100%" loading=lazy loading=lazy><br>Fig 3. Struttura per l'utilizzo dei telai ad esempio n. 2</p> <p>Il codice della pagina HTML originale con il frame sarà il seguente:</p> <blockquote><html > <head > <title ><span>Esempio n.2 di una pagina html con frames</span> <span>Il tuo browser non supporta la visualizzazione dei frame</span>

Codice del file Top.html

<span>File top.html - intestazione del sito</span>

Esempio n.2

E qui potrebbe esserci un logo e altro :)

Codice del file Menu.html

<span>File menu.html - menu del sito</span>

Codice del file Content.html

<span>File content.html: contenuto del sito</span>

Pagina iniziale

Contenuto del sito. Il file content.html è ora aperto
Questo è lo stato iniziale del nostro frame. Chiamiamo questo file "Pagina Master"

Codice del file about-site.html

<span>File about-site.html - Pagina relativa al sito</span>

Informazioni sul sito

Pagina relativa al sito. Il file about-site.html è ora aperto

Codice del file about-autor.html

<span>File about-autor.html - sull'autore</span>

Informazioni sull'autore

Informazioni sulla pagina dell'autore. Il file about-autor.html è ora aperto

Codice del file Footer.html

<span>File footer.html - sul sito</span> Piè di pagina del sito web. Il file footer.html è ora aperto
Spiegazione per esempio n. 2

Inizialmente, l'intera pagina è divisa in tre aree orizzontalmente in un rapporto di 3:14:3. L'attributo rows="15%,70%,15%" è responsabile di ciò. Il primo frame nel nostro esempio è l'intestazione (l'abbiamo chiamato top.html), ad esso è assegnato il 15% dello spazio in altezza. Segue una grande cornice che occupa il 70% dell'altezza. Lo dividiamo in due parti utilizzando cols="25%,75%" in un rapporto di 1:3. A sinistra ci sarà un frame menu.html , a destra content.html . Abbiamo chiamato specificatamente il secondo frame name="main" per poter cambiare pagina. Tieni presente che nel file menu.html, ogni collegamento ha un attributo target="main" allegato ad esso, che consente agli elementi di essere caricati in un'area chiamata main quando si fa clic sul collegamento. Nella parte inferiore del sito c'è l'ultimo frame footer.html.

Se implementi l'esempio n. 2, dovresti ottenere la seguente pagina HTML nel suo stato originale:


Fig 4. Esempio n. 2 - stato iniziale

Quando vai alla pagina Informazioni del sito, la pagina sarà simile a questa:


Fig 5. Esempio n. 2 - secondo stato


Fig 6. Esempio n. 2 - terzo stato

Etichetta

Gli attributi facoltativi di questo tag sono width="width" e Height="height" e l'attributo obbligatorio è src="frame address" .

Attributi e proprietà dei tag

1. Attributo COLS="Parametri"
Imposta il numero di divisioni verticali della pagina.

2. Attributo ROWS="Parametri".
Imposta il numero di divisioni orizzontali della pagina.

Ora diamo un'occhiata a come impostare i parametri di partizionamento.

a) Utilizzando il numero, che corrisponderà al numero di pixel. Ad esempio, cols = "100,100,300" imposta la pagina da dividere in tre aree, ciascuna delle quali avrà una larghezza: rispettivamente 100 pixel, 100 pixel e 300 pixel.

B) Utilizzando le percentuali della larghezza/altezza totale. Negli esempi discussi sopra abbiamo utilizzato la divisione percentuale, quindi sembra inutile fornire un esempio.

c) Utilizzando * (asterisco). Ad esempio, cols = "2*,3*,100" imposta le prime due aree su un rapporto 2:3 e la terza area su una larghezza di 100 pixel.

Tutti e tre i metodi possono essere combinati. Ad esempio, cols="2*,100,15%,4*" .

3. Attributo Frameborder="(sì|no)".
Determina se una cornice ha un bordo. Se la risposta è sì, allora è in vigore il successivo quarto attributo di confine.

4. Attributo border="parametro"
In pixel, border specifica lo spessore del bordo dell'area della cornice. Ad esempio, frameborder = "2" specifica un'area con un contorno selezionato di 2 pixel.

5. attributo bordercolor="colore".
Specifica il colore del bordo, se presente. Il colore può essere specificato a parole o in codice (vedi tavolozza colori html).

Nota: si prega di notare che il tag serve un tag di chiusura .

Attributi e proprietà dei tag

1. Attributo src="indirizzo elemento"
L'URL completo dell'indirizzo dell'elemento deve essere specificato qui come parametro. Questo attributo è obbligatorio. Ti è già familiare, perché... era presente negli esempi 1 e 2.

2. Attributo marginwidth="numero"
Imposta la larghezza del rientro all'interno della cornice dai bordi in pixel. Ad esempio, marginwidth="10" imposterà il margine del contenuto a sinistra e a destra del bordo del frame.

3. Attributo marginhight="numero"
Simile al secondo con l'unica differenza che imposta l'offset dell'altezza.

4. Attributo Scorrimento="(sì|no|auto)".
Imposta la possibilità di scorrere la cornice se non rientra nell'area ad essa assegnata. Il valore predefinito è auto (significa creare una pergamena se necessario).

5. Attributo Noresize
Se questo attributo è impostato, all'utente non è consentito modificare in modo indipendente i limiti del frame. Per impostazione predefinita, questo attributo non è impostato e l'utente può modificare i confini come desidera.

5. Nome attributo="titolo"
Questo attributo può essere utilizzato per dare un nome al frame. Ciò è necessario affinché altri frame possano accedere a questo frame. L’esempio n. 2 riguarda proprio un caso del genere.

Nota:
Il nome non deve iniziare con un carattere di sottolineatura "_".

6. Attributi frameborder, border e bordercolor
Questi tre attributi sono gli stessi di frameset (vedi attributi frameset sopra).

Vantaggi e svantaggi dei telai

Pro delle cornici

  • La possibilità di visualizzare più pagine in modo indipendente in una finestra (esempio 1 e 2 sopra);
  • Possibilità di cambiare contenuto della pagina senza ricaricare la pagina (cambia solo un'area dello schermo);
  • La capacità di costruire in modo flessibile la struttura del sito (intestazione, menu, piè di pagina, ecc. - tutte le informazioni statiche vengono archiviate separatamente in file e ciò consente di modificare rapidamente parte del sito);
  • L'utente può modificare personalmente la dimensione della finestra se l'opzione noresize non è impostata;

Contro delle cornici

  • I motori di ricerca indicizzano male i siti frame perché non sono in grado di interpretare i file caricati nei frame. Il motore di ricerca distingue le pagine in base al loro indirizzo (URL) e per i frame, nonostante i diversi stati, l'indirizzo della pagina non cambia. Ciò è contrario alle regole del motore di ricerca, il che significa che non è un dato di fatto che il motore di ricerca possa indicizzare il sito.
  • È impossibile aggiungere un sito ai segnalibri nei frame, perché L'URL della pagina sarà lo stesso. Pertanto, puoi solo preservare lo stato originale del telaio.
  • Non tutti i browser supportano i frame.

Il futuro delle montature:
Molti webmaster hanno iniziato da tempo ad abbandonare i frame. Ciò è dovuto alle difficoltà di promozione nei motori di ricerca. Ora tutti stanno passando ad Ajax come modo più dinamico e moderno di visualizzare le informazioni su una pagina del sito.

Caro lettore, abbiamo esaminato i tag documento html riguardante i telai. Nonostante il dubbio futuro di quest'area, ogni webmaster dovrebbe conoscere i frame.

ARTICOLI CORRELATI