Consigli Utili

Come creare frame mobili in HTML

Pin
Send
Share
Send
Send


Sicuramente hai già sentito più di una volta parlare di un concetto come i frame. Puoi leggerli in qualsiasi tutorial html, nonché sulle risorse per la creazione di siti. Dopo aver studiato molti esempi e descrizioni, ho deciso di raccontare tutto sulle cornici con parole mie in una forma molto semplice. I pro, i contro e i frame futuri saranno discussi in fondo a questa pagina. Cosa sono esattamente i frame in HTML?

Cosa sono i frame in html

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

Apri la guida in qualsiasi programma (può essere un blocco note, un tipo di programma, un browser, ecc.). Quasi sempre, vedrai un aiuto costituito da due parti (navigazione a sinistra, contenuto a destra). Le parti sinistra e destra sono solo cornici separate. Di seguito è riportato uno screenshot realizzato con l'aiuto del più comune blocco note di Windows:

Quello che vedi è una pagina web composta da due frame indipendenti separati. Ecco un esempio di codice html per tale frame da una guida.

Esempio con i frame n. 1 (facendo aiuto)

Nel quadro sopra, l'aiuto sopra discusso sarà simile al seguente:

Dividere una pagina in regioni usando i frame è molto simile al layout della tabella html (vedi il tag della tabella HTML). Il codice di esempio per tale pagina potrebbe essere simile al seguente:

Spiegazione per esempio n. 1

Come puoi vedere dal codice sopra, una pagina creata da frame è molto simile a una normale pagina html: c'è un tag html di apertura, sezione, titolo, ma c'è una grande differenza. Probabilmente hai notato che manca il tag body, che è responsabile del corpo della pagina. Invece, viene inserito un tag che è responsabile per il corpo della pagina. Questo tag ha due attributi cols = "25%, 75%", che significa dividere l'intero corpo della pagina in due aree verticalmente in un rapporto 1: 3. La prima area occuperà il 25% della larghezza dell'intero schermo (avrà il primo menu menu.html), la seconda area occuperà il 75% della larghezza dell'intero schermo (avrà il secondo frame content.html).

L'ultimo tag completamente opzionale è questo. È necessario per i browser che non supportano i frame. Se il browser non supporta i frame, si consiglia di informare educatamente l'utente tramite questo tag.

A proposito, nota che il tag non ha bisogno di un tag di chiusura.

Spero che tu abbia una comprensione dei frame. Per comprendere esempi più difficili, proviamo a creare una semplice pagina html composta da 4 frame. Questo sarà l'esempio numero 2.

Esempio con 4 frame n. 2

Frame per esempio 2:

Il codice per la pagina del frame html originale sarà il seguente:

Top.html Codice file

Codice file Menu.html

Content.html Codice file

Codice per about-site.html

Codice file about-autor.html

Codice file Footer.html

Spiegazione per esempio n. 2

Inizialmente, l'intera pagina è divisa in tre aree in orizzontale in un rapporto di 3: 14: 3. L'attributo righe = "15%, 70%, 15%" è responsabile per questo. Il primo frame nel nostro esempio è l'intestazione (lo abbiamo chiamato top.html), a cui viene assegnato il 15% dell'altezza. Successivamente c'è una grande cornice che occupa il 70% dell'altezza. Lo dividiamo in due parti usando cols = "25%, 75%" in un rapporto 1: 3. A sinistra è il frame menu.html, a destra è content.html. Abbiamo specificamente chiamato il secondo frame name = "main" per cambiare pagina. Si noti che nel file menu.html, l'attributo target = "main" è assegnato a ciascun collegamento, il che consente di caricare elementi nell'area denominata principale quando si fa clic su questo collegamento. Nella parte inferiore del sito si trova l'ultimo frame footer.html.

Se stai implementando l'esempio n. 2, dovresti ottenere questa pagina html nel suo stato originale:

Quando vai alla pagina relativa al sito, la pagina apparirà così:

Quando vai alla pagina dell'autore, vedrai quanto segue:

Il tag è necessario per inserire una cornice esterna nella pagina. Un tipico esempio potrebbe essere il codice video di YouTube. Il formato di questo tag sembra molto semplice:

Gli attributi opzionali di questo tag sono w e height = "height" e l'attributo richiesto src = "https://zarabotat-na-sajte.ru/uroki-html/%D0%B0%D0%B4%D1%80%D0% "B5% D1% 81% 20% D1% 84% D1% 80% D0% B5% D0% B9% D0% BC% D0% B0."

Attributi e proprietà dei tag

1. Attributo COLS = "Parametri"
Specifica il numero di interruzioni di pagina verticali.

2. Attributo ROWS = "Parametri"
Specifica il numero di interruzioni di pagina orizzontali.

Ora considereremo come impostare i parametri della partizione.

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

b) Utilizzando la percentuale della larghezza / altezza totale. Negli esempi sopra, abbiamo usato il partizionamento percentuale, quindi sembra insensato fare un esempio.

c) Utilizzo di * (asterisco). Ad esempio, cols = "2 *, 3 *, 100" definisce le prime due aree in un rapporto 2: 3 e la terza area sarà larga 100 pixel.

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

3. Attributo frameborder = ""
Determina se una cornice ha una cornice. Se la risposta è sì, il successivo attributo del quarto bordo è valido.

4. Bordo dell'attributo = "parametro"
In pixel, border imposta lo spessore del tratto dell'area della cornice. Ad esempio, frameborder = "2" definisce un'area con un contorno selezionato di 2 pixel.

5. L'attributo bordercolor = "color"
Definisce il colore della cornice, se presente. Il colore può essere impostato sia in parole che in codice (vedi la tavolozza dei colori html).

Nota: notare che il tag richiede un tag di chiusura.

I vantaggi dei telai

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

Contro di fotogrammi

  • I motori di ricerca indicizzano male i siti sui 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 gli stati diversi, l'indirizzo della pagina non cambia. Ciò è contrario alle regole del motore di ricerca, e quindi non al fatto che il motore di ricerca sarà in grado di indicizzare il sito.
  • Non è possibile aggiungere il sito ai preferiti nei frame, perché L'URL della pagina sarà lo stesso. Pertanto, è possibile salvare solo lo stato originale del frame.
  • Non tutti i browser supportano i frame.

Il futuro dei telai:
Molti webmaster hanno già iniziato a rifiutare i frame. Ciò è dovuto alle difficoltà di promozione nei motori di ricerca. Ora tutti si stanno spostando su Ajax, come un modo più dinamico e moderno di visualizzare informazioni su una pagina del sito.

Caro lettore, abbiamo esaminato i tag html del documento relativi ai frame. Nonostante il dubbio futuro di questa tendenza, ogni webmaster dovrebbe conoscere i frame.

Link alla prossima lezione: Lezione 12. Proprietà posizione CSS

Utilizzo del tag A per caricare in una cornice

Utilizzando un tag hyperlink È possibile caricare un documento in una cornice specifica.

HREF. Specifica l'URL o il nome del nuovo documento che si desidera caricare in una finestra frame specifica.

TARGET. Definisce il nome del frame in cui verrà caricato il nuovo documento. Questo nome deve essere assegnato al frame con l'attributo NAME nel tag.

Nel seguente esempio, lo schermo è diviso in due aree verticali. Il sommario si trova nella parte sinistra più piccola e tutti gli altri documenti HTML verranno caricati in quella destra. Il sommario contiene collegamenti ipertestuali di testo semplici alle sezioni pertinenti. Perché tutto funzioni, è necessario creare documenti HTML nei file cosm.htm, eat.htm, perf.htm, massage.htm e manic.htm.

Il tag elimina la necessità di ripetere l'attributo TARGET in ogni singolo collegamento ipertestuale se tutti puntano alla stessa finestra del frame. Per fare ciò, inserisci il tag con l'attributo TARGET nel contenitore ....

L'uso del tag consentirà di ridurre le dimensioni del sommario left.htm dell'esempio precedente.

attributo TARGET ogni collegamento specifico è sostituito dall'attributo tag con lo stesso nome.

Effetti speciali ottenuti usando l'attributo TARGET

Come già accennato, i nomi dei frame non possono iniziare con un trattino basso, poiché i nomi dei servizi iniziano con esso, che trasmettono informazioni specifiche al browser. I seguenti sono nomi speciali, ognuno dei quali viene utilizzato per ottenere un effetto specifico.

TARGET = "_ blank". Il documento viene caricato in una nuova finestra del browser.

TARGET = "_ self". Il documento viene caricato nella finestra corrente.

TARGET = "_ parent". Il documento viene caricato nel frame principale. Di solito questa è una cornice nel contenitore ... prima di quella corrente. Se non esiste un frame principale, il valore "_parent" diventa identico a "_self".

TARGET = "_ top". Il documento viene caricato nel frame più in alto.

Fondamentalmente, questi nomi di servizi sono progettati per "rompere" l'attuale struttura del frame in un modo o nell'altro. Sperimenta con loro per capire come caricare i documenti in varie finestre.

HTML 4.0 introduce frame mobili (o incorporati). Usando un tag, puoi mettere un frame in un normale documento HTML. E il contenitore ... non è necessario qui.

È richiesto il tag di chiusura!

ALING. Definisce il tipo di allineamento. Prende i valori "sinistra", "centro", "destra".

ALTEZZA. Definisce l'altezza della cornice in pixel.

WIDTH. Definisce la larghezza della cornice in pixel.

SRC, MARGINWIDTH, MARGINHEIGHT, SCROLLING, FRAMEBORDER, BORDER, BORDERCOLOR, NAME. Simile a quelli discussi in precedenza.

vspase. Imposta i margini sopra e sotto dall'esterno di iframe

hspase. Imposta i margini laterali dall'esterno dell'iframe

marginwidth. Determina la quantità di rientro lungo i bordi sinistro e destro all'interno dell'iframe, deve essere uguale o maggiore di 1.

marginheight. Determina la quantità di rientro lungo i bordi superiore e inferiore all'interno dell'iframe, deve essere uguale o maggiore di 1.

scrolling. Indica se la barra di scorrimento è visualizzata nell'iframe; il valore può essere "yes", "no" o "auto". Il valore predefinito per i documenti normali è auto.

titolo. Testo della descrizione comandi.

Definisce ciò che verrà mostrato nella finestra del browser se non supporta i frame.

Il problema della barra degli indirizzi con la struttura del frame del sito

Quando si utilizzano i frame sul sito, viene utilizzata una pagina che indica la posizione dei frame.

Ecco un esempio di tale pagina:

Dopo aver caricato questa pagina, le informazioni vengono caricate in frame. All'interno di questi frame, si verificano tutti i clic dell'utente sulle pagine del sito. La barra degli indirizzi mostra sempre solo il percorso della pagina iniziale, che non cambia durante le transizioni. Il visitatore non sa dove si trova in questo momento.

Se un visitatore non arriva immediatamente alla pagina principale del sito (ad esempio, da un motore di ricerca), ciò non porta a una ricostruzione della struttura generale del frame. Questo è il motivo per cui il proprietario del sito non può specificare l'indirizzo nella pagina interna del sito.

Esistono diverse soluzioni a questo problema.

In precedenza, la palla considerava un esempio di una struttura a telaio. Prenderemo in considerazione vari modi per risolvere questo problema su di esso.

L'idea è questa: quando si carica una pagina contenente una parte di informazioni, controlleremo l'ambiente della pagina e, se manca la struttura del frame richiesta, la creeremo usando uno script.

Sono possibili tre casi:

  1. il visitatore è andato alla pagina contenente la struttura della cornice,
  2. il visitatore è andato a una delle pagine informative,
  3. il visitatore è arrivato alla pagina con il menu di navigazione.

Nel primo caso, dopo la verifica, non è richiesta alcuna azione. Il secondo e il terzo sono quasi identici, quindi considereremo solo il secondo caso di seguito.

E così, il visitatore ottiene "dove non è necessario". Nella parte superiore della pagina, inserisci lo script che creerà la struttura del frame.

L'implementazione della soluzione è possibile sia sul lato client che sul lato server. Lo svantaggio principale dell'implementazione sul lato client è evidente: la dipendenza dalle capacità e dalle impostazioni del client. Ad esempio, lo scripting è proibito sul computer dell'utente. La seconda opzione non funzionerà se non c'è supporto sul server PHP.

Soluzione JavaScript.

C'è un limite con questo approccio: non tutti i browser supportano JavaScripte, in alcuni casi, gli stessi utenti disabilitano gli script.

Innanzitutto, controlla l'ambiente della pagina, quindi, in assenza della struttura del frame richiesta, crearlo.

Crea un file frame.js:

Innanzitutto, controlliamo il nome della finestra in cui è caricata la pagina: if (window.name! = "main"). Se il nome della finestra e il nome del frame non corrispondono, è necessario creare una struttura del frame. Questo viene fatto in modo dinamico usando il metodo scrivere oggetto documento.

Colleghiamo un file a ciascuna pagina del sito frame.js. Ora le pagine del sito avranno la seguente struttura:

Con questo approccio per risolvere questo problema, scompare la necessità di un file contenente una struttura di frame.

Soluzione php

Con questo approccio, il sito sarà disponibile per più visitatori.

Controlleremo l'ambiente della pagina in modo diverso (non come quando si utilizza JavaScript). Caricheremo il documento nel frame con il parametro frame = sì. Quando apriamo la pagina, controlliamo questo parametro e, se necessario, creiamo dinamicamente una struttura di frame. Di seguito è riportato il codice responsabile di questo.

Inserisci il codice in un file frames.php. Ora è necessario collegarlo a ciascuna pagina del sito. Di seguito è riportato un esempio di tale pagina.

In questo caso, come per l'implementazione sul lato client, non è necessario creare separatamente HTML documento che descrive la struttura del telaio.

Creazione della cornice

La struttura di un documento HTML con frame assomiglia molto al formato di un normale documento HTML. Come in un normale documento HTML, tutto il codice viene inserito tra i tag e i tag associati e le intestazioni si trovano nel contenitore. La differenza principale tra un documento con frame e un normale documento HTML è che un documento con frame utilizza un tag associato anziché un tag (dal set di frame inglese - un set di frame).
L'esempio seguente mostra la struttura di un documento HTML con frame:

Esempio: struttura di un documento HTML con frame

frame_left

Nell'esempio sopra, la pagina contiene tre aree, in ciascuna delle quali vengono inizialmente caricati i 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ò, specificare l'indirizzo dell'immagine corrispondente nell'attributo srcper esempio src = "http://wm-school.ru/html/image.gif". Si noti che l'elemento viene utilizzato senza un tag di chiusura.
Solo i tag o un altro set di frame coperti da e possono essere contenuti in un contenitore.
Il tag ha i seguenti attributi:

  • righe - descrive la suddivisione della pagina in righe:
  • Cols - descrive la suddivisione della pagina in colonne:
Le aree risultanti da questa impaginazione saranno cornici. L'assenza di questi attributi definisce un frame che occupa l'intera finestra del browser.

Nel valore dell'attributo righe e Cols è necessario indicare non il numero di righe o colonne, ma il valore della larghezza e dell'altezza dei telai. Tutti i valori nell'elenco sono separati da virgole. Le dimensioni possono essere indicate in unità assolute (in pixel) o in percentuale:

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

Come puoi vedere da questo esempio, il contenitore con l'attributo righe crea innanzitutto due frame orizzontali e invece del secondo frame, ne viene sostituito un altro, che divide il frame orizzontale inferiore in due colonne utilizzando l'attributo Cols, la colonna di sinistra occupa il 20% e l'80% di destra della finestra del browser.
Se il browser non supporta i frame, il testo situato tra i tag e verrà visualizzato nella finestra. Qualsiasi cosa tra i tag e viene ignorata dai browser che supportano i frame. Pertanto, lo sviluppatore deve scrivere codice che duplica il contenuto dei frame in altri modi e posizionare questo codice nel contenitore, quindi tutti gli utenti possono vedere la sua pagina web.
Come già notato, un tag non accoppiato viene utilizzato per inserire una cornice separata nel documento. attributo src specifica il documento da visualizzare all'interno di questo riquadro, ad esempio: Se l'attributo src mancante, viene visualizzato un riquadro vuoto.

Bordi o spazio tra i frame

Per impostazione predefinita, il browser visualizza un grigio e in genere sotto forma di un bordo tridimensionale tra i frame, con il quale i visitatori possono regolare le dimensioni del frame.
Il bordo della cornice può essere controllato, come qualsiasi altro elemento della cornice. Per fare ciò, ci sono diversi attributi di elementi che ti consentono di personalizzare i bordi della cornice. Lo spessore della linea di confine è determinato dall'attributo confine. Per impostazione predefinita, lo spessore del bordo è cinque.
Per nascondere il bordo della cornice, è necessario specificare il valore della larghezza del bordo uguale a zero o assegnare il valore "no" o "0" all'attributo frameborder. attributo frameborder può assumere solo due valori opposti. Se il valore dell'attributo frameborder è uguale a "sì" o "1", quindi verrà visualizzato il bordo dei fotogrammi e se "0" o "no", allora no. Si noti che i valori degli attributi frameborder variare per diversi browser. Per risolvere questo problema, utilizzare l'attributo due volte framebordere per alcuni browser è ancora necessario aggiungere l'attributo framespacing con il valore "0":

Nel seguente esempio, rimuoviamo il bordo tra i frame:

Guarda il video: Tavolinimensole per bar FAI DA TE - Insegna con incisione e resina epossidica - BOULEVARD CAFE' (Dicembre 2022).

Pin
Send
Share
Send
Send