Una linea temporale è un modo utile per visualizzare un elenco di eventi su una pagina Web e una linea temporale interattiva offre agli utenti un certo controllo sulla visualizzazione del contenuto. Sebbene esistano molti modi per creare una linea temporale interattiva, la maggior parte richiede più di un semplice linguaggio di markup ipertestuale (HTML). Tuttavia, esiste una soluzione HTML molto semplice. Puoi facilmente creare barre di scorrimento interattive per la tua linea del tempo usando l'attributo HTML "style". In questo modo, gli utenti della tua linea temporale saranno in grado di scorrere i suoi contenuti come vogliono.
Passaggio 1
Crea il tuo file HTML. Aprire un nuovo documento in un programma software di editor di testo e creare una pagina HTML di base. Aggiungi questo codice nella sezione "body" HTML: L'elemento division ("div") è un contenitore per l'elenco degli eventi della tua cronologia. Il valore "overflow" di "auto" aggiunge una barra di scorrimento interattiva quando la linea temporale diventa più ampia o più alta di questo contenitore. Salvare la pagina come "timeline.html".
Passaggio 2
Creare il proprio contenuto della linea temporale. Nello spazio tra i tag "div" di apertura e chiusura, aggiungi gli eventi della tua linea temporale in ordine crescente o decrescente. Aggiungi ogni evento all'interno della sua sezione di HTML ben formato. Continua a salvare la pagina mentre lavori.
Prova il tuo codice HTML. Apri il browser del tuo computer e carica "timeline.html". Se il suo contenuto è più grande del contenitore "div", vedrai una barra di scorrimento interattiva. Regola i valori "larghezza" e "altezza" del contenitore in base al layout verticale o orizzontale.
Suggerimenti
I layout verticali sono i più facili da codificare. Avvolgi semplicemente ciascuna sezione dell'evento all'interno del suo elemento "div". Per un layout orizzontale, è possibile utilizzare una tabella con una singola riga e una cella di colonna per ciascun evento. Se lo fai, rendi l'altezza del tuo tavolo uguale all'altezza del tuo contenitore "div". Fai attenzione ai valori "margin" e "padding" verticali del tuo tavolo.
In questo articolo viene creata una barra di scorrimento interattiva utilizzando un foglio di stile a cascata "CSS" (CSS). I fogli di stile "Inline" vanno all'interno dell'attributo "style" del tag di apertura di un elemento HTML. Tuttavia, è possibile utilizzare un foglio di stile "interno" o "esterno". I fogli di stile "interni" vanno all'interno della sezione "head" HTML. I fogli di stile "esterni" sono file ".css" separati. L'uso di uno di questi tipi offre un maggiore controllo sulla formattazione di qualsiasi contenuto HTML.
È possibile estendere l'interattività dell'esempio utilizzando JavaScript. È possibile iniziare aggiungendo pulsanti HTML e quindi scrivere un JavaScript per spostare il contenuto della linea temporale quando gli utenti fanno clic sui pulsanti.
Articoli che ti serviranno
Programma software di editor di testi
Computer © www.354353.com