Share
In questo tutorial, esamineremo come creare facilmente un visualizzatore di contenuti accattivante e poco ingombrante che funziona anche con JavaScript disabilitato. Creeremo un solido nucleo di HTML semantico, in stile con alcuni CSS di base e utilizzeremo jQuery per aggiungere ulteriori miglioramenti sotto forma di animazioni di transizione.
La seguente schermata mostra cosa finiremo con la fine del tutorial:
Per prima cosa, creiamo la pagina HTML sottostante per il nostro visualizzatore di contenuti; in un nuovo file nel tuo editor di testo crea la seguente pagina:
Content Viewer a prova di proiettile
- Pannello 1
- Pannello 2
- Panel 3
- Panel 4
- Panel 5
Supernova 1994D, visibile come il punto luminoso in basso a sinistra, si è verificato nella periferia del disco Galaxy NGC 4526.
Le radiazioni delle stelle calde che si trovano nella parte superiore dell'immagine illuminano ed erodono questo gigantesco pilastro gassoso.
V838 Mon si trova a circa 20.000 anni luce di distanza dalla Terra, al margine esterno della Via Lattea.
La galassia Sombrero è una galassia a spirale non barrata nella costellazione della Vergine, a circa 30 milioni di anni luce di distanza.
Questa regione di formazione stellare corrente attiva fa parte di una nebulosa a emissione diffusa a circa 6.500 anni luce di distanza.
Salva questo come contentviewer.html. Iniziamo con un codice HTML pulito e semantico, che non utilizza più elementi di quanto strettamente necessario. Abbiamo un contenitore esterno per il visualizzatore nella sua interezza, che contiene una struttura di navigazione per selezionare quale pannello di contenuti visualizzare e un secondo contenitore per i pannelli di contenuto stessi.
All'interno del contenitore del pannello di contenuti, abbiamo un altro contenitore utilizzato per racchiudere tutti i pannelli di contenuto (questo è necessario per visualizzare correttamente i pannelli di contenuto) e i pannelli di contenuto stessi. Ogni pannello contiene un'immagine e un intervallo che descrive l'immagine.
Le immagini principali vengono aggiunte al documento come immagini HTML appropriate utilizzando il elemento - questo perché sono contenuti e dovrebbero essere visibili alle tecnologie assistive o agli utenti sia con script che con CSS disabilitati o altrimenti non disponibili. La struttura di navigazione conterrà anche le immagini, ma poiché queste non sono classificate come contenuti non devono essere visibili in tutte le situazioni e possono quindi essere aggiunte usando i CSS, da cui i nomi di classi addizionali sul elementi.
In questo momento la pagina dovrebbe apparire così:
Non ha un bell'aspetto, ma il documento scorre correttamente e gli elementi sono tutti chiaramente visibili e utilizzabili.
Ora possiamo utilizzare i CSS per trasformare il visualizzatore di contenuti in un'interfaccia funzionante che non sembra terribile. W è già collegato al foglio di stile nella parte superiore della nostra pagina, quindi creiamolo ora; in un nuovo file nel tuo editor di testo aggiungi i seguenti selettori e regole:
#viewer width: 700px; margin: auto; #nav width: 200px; float: sinistra; margin: 0; padding: 0; list-style-type: none; #nav li width: 200px; altezza: 100px; padding: 0; #nav li a display: block; width: 100%; height: 100%; text-trattino: -9999px; overflow: hidden; background: url (img / thumbs.png) no-repeat 0 0; #nav li a: hover, #nav li a.on background-position: -200px 0; #nav li.thumb2 a background-position: 0 -100px; #nav li.thumb2 a: hover, #nav li.thumb2 a.on background-position: -200px -100px; #nav li.thumb3 a background-position: 0 -200px; #nav li.thumb3 a: hover, #nav li.thumb3 a.on background-position: -200px -200px; #nav li.thumb4 a background-position: 0 -300px; #nav li.thumb4 a: hover, #nav li.thumb4 a.on background-position: -200px -300px; #nav li.thumb5 a background-position: 0 -400px; #nav li.thumb5 a: hover, #nav li.thumb5 a.on background-position: -200px -400px; #panels width: 500px; altezza: 500px; overflow: hidden; position: relative; float: sinistra;
Salva questo come contentviewer.css nella stessa directory della pagina HTML. Ho mantenuto il design minimale in modo che possiamo concentrarci su ciò che lo fa funzionare; il pannello di navigazione e di visualizzazione è flottato uno accanto all'altro e le singole voci di elenco hanno le loro immagini di sfondo e gli stati di passaggio del mouse. Abbiamo anche aggiunto sopra afferma pure. Questa parte del CSS è puramente per il layout / presentazione e non influisce sulla funzionalità.
L'importante è come sono disposti i contenitori e le immagini dei contenuti. Il contenitore esterno (#panelsviene data una dimensione fissa che corrisponde all'altezza e alla larghezza di una singola immagine di contenuto e ha la sua proprietà di overflow impostata su nascosto per garantire che venga visualizzata una sola immagine alla volta. Questo è l'unico codice CSS veramente richiesto per il visualizzatore di contenuti per funzionare in misura elementare. Se guardi la pagina ora, vedrai che puoi fare clic su una delle miniature e la corrispondente immagine a dimensione intera verrà visualizzata nel pannello di visualizzazione:
Questo è fantastico perché rimane funzionale e accessibile senza fare affidamento su JavaScript. Passeremo a utilizzare jQuery per aggiungere alcuni effetti di transizione fluidi in un momento, ma prima dovremmo aggiungere alcuni altri stili richiesti per le animazioni e visualizzare correttamente i paragrafi. Aggiungi il seguente codice in fondo a contentviewer.css:
#slider width: 2500px; altezza: 500px; #slider div float: left; position: relative; #slider p position: absolute; bottom: 0; a sinistra: 0; color: #fff; font: 16px "Trebuchet MS"; margin: 0; width: 90%; altezza: 45px; imbottitura: 5px 5% 10px; background-color: # 000;
Il contenitore interno (#slider) viene data un'altezza fissa uguale a una singola immagine di contenuto, ma una larghezza uguale a tutte le immagini. Quindi i singoli contenitori contenenti le immagini e i paragrafi vengono posizionati a sinistra per farli impilare orizzontalmente. Infine, i paragrafi sono stilizzati e posizionati in modo tale da sovrapporre ciascuna immagine:
La rotazione dei singoli pannelli di contenuto a sinistra e l'impostazione della dimensione del dispositivo di scorrimento non sono strettamente necessari, senza di essi le immagini si sovrappongono solo verticalmente. Ciò significherebbe che tutte le animazioni che abbiamo aggiunto avrebbero dovuto spostare i pannelli di contenuto anche verticalmente, ma li animeremo orizzontalmente.
Un punto che dovrei fare qui è che il codice finora non funziona in Opera; per qualche ragione, Opera non può usare gli ancoraggi nella pagina per mostrare i diversi pannelli di contenuto quando si fa clic su uno degli elementi di navigazione. Questo è un grosso fallimento e sembra essere un problema in più di una versione di Opera. Apparentemente c'è una correzione e chiunque utilizzi Opera come browser principale avrà già implementato questa correzione. Non è un problema quando il JavaScript è stato aggiunto però.
Poiché la pagina ora funziona da sola, possiamo aggiungere il JavaScript che trasformerà questo da una pagina funzionale in un'interfaccia attraente. Abbiamo lasciato un vuotoy
Accentsconagua