Share
Dans ce tutoriel, nous allons voir comment créer facilement une visionneuse de contenu attrayante et peu encombrante. qui fonctionne même avec JavaScript désactivé. Nous allons construire un noyau solide de code HTML sémantique, stylé avec quelques CSS de base, puis nous utiliserons jQuery pour apporter d'autres améliorations sous la forme d'animations de transition..
La capture d'écran suivante montre ce à quoi nous allons aboutir à la fin du tutoriel:
Commençons par créer la page HTML sous-jacente pour notre afficheur de contenu. Dans un nouveau fichier de votre éditeur de texte, créez la page suivante:
Visionneuse de contenu à l'épreuve des balles
- Panneau 1
- Panneau 2
- Panneau 3
- Panneau 4
- Panneau 5
Supernova 1994D, visible comme la tache lumineuse en bas à gauche, s’est produite à la périphérie de la galaxie discale NGC 4526.
Le rayonnement des étoiles chaudes du haut de la photo illumine et érode ce pilier géant et gazeux.
La V838 Mon est située à environ 20 000 années-lumière de la Terre, à la périphérie de la Voie Lactée..
La galaxie du Sombrero est une galaxie spirale non barrée située dans la constellation de la Vierge à environ 30 millions d'années-lumière..
Cette région de formation d'étoiles de courant actif fait partie d'une nébuleuse à émission diffuse située à environ 6 500 années-lumière.
Enregistrer ceci sous contentviewer.html. Nous allons commencer avec un code HTML propre et sémantique, n'utilisant pas plus d'éléments que ce qui est strictement nécessaire. Nous avons un conteneur externe pour le spectateur dans son intégralité, qui contient une structure de navigation permettant de sélectionner le panneau de contenu à afficher et un second conteneur pour les panneaux de contenu eux-mêmes..
Dans le conteneur de panneau de contenu, nous avons un autre conteneur utilisé pour inclure tous les panneaux de contenu (cela est nécessaire pour afficher correctement les panneaux de contenu) et les panneaux de contenu eux-mêmes. Chaque panneau contient une image et une étendue décrivant l'image.
Les images principales sont ajoutées au document en tant qu'images HTML appropriées à l'aide du element - c'est parce qu'ils sont contenus et doivent être visibles pour les technologies d'assistance ou les utilisateurs avec les scripts et les CSS désactivés ou non disponibles. La structure de navigation contiendra également des images, mais comme elles ne sont pas classées comme contenu, elles ne doivent pas nécessairement être visibles dans toutes les situations et peuvent donc être ajoutées à l'aide de CSS. éléments.
Pour le moment, la page devrait ressembler à ceci:
Ça n'a pas l'air génial, mais le document coule correctement et les éléments sont tous clairement visibles et utilisables.
Nous pouvons maintenant utiliser CSS pour transformer le visualiseur de contenu en une interface fonctionnelle qui ne semble pas terrible. W déjà lié à la feuille de style en tête de notre page, créons-la maintenant; Dans un nouveau fichier de votre éditeur de texte, ajoutez les sélecteurs et règles suivants:
#viewer width: 700px; marge: auto; #nav width: 200px; float: gauche; marge: 0; rembourrage: 0; type de style de liste: aucun; #nav li width: 200px; hauteur: 100px; rembourrage: 0; #nav li a display: block; largeur: 100%; hauteur: 100%; retrait du texte: -9999px; débordement caché; fond: url (img / thumbs.png) no-repeat 0 0; #nav li a: survolez, #nav li a.on background-position: -200px 0; #nav li.thumb2 a background-position: 0 -100px; #nav li.thumb2 a: survolez, #nav li.thumb2 a.on background-position: -200px -100px; #nav li.thumb3 a background-position: 0 -200px; #nav li.thumb3 a: survolez, #nav li.thumb3 a.on background-position: -200px -200px; #nav li.thumb4 a background-position: 0 -300px; #nav li.thumb4 a: survolez, #nav li.thumb4 a.on background-position: -200px -300px; #nav li.thumb5 a background-position: 0 -400px; #nav li.thumb5 a: survolez, #nav li.thumb5 a.on background-position: -200px -400px; #panels width: 500px; hauteur: 500px; débordement caché; position: relative; float: gauche;
Enregistrer ceci sous contentviewer.css dans le même répertoire que la page HTML. J'ai minimisé le design afin que nous puissions nous concentrer sur ce qui le fait fonctionner; le panneau de navigation et le panneau de visualisation sont placés côte à côte et les éléments individuels de la liste se voient attribuer leurs images d'arrière-plan et leurs états de survol. Nous avons également ajouté sur États aussi. Cette partie de la CSS est purement pour la mise en page / présentation et n'affecte pas la fonctionnalité.
Ce qui est important, c'est la manière dont les conteneurs et les images de contenu sont organisés. Le conteneur extérieur (#panneaux) se voit attribuer une taille fixe qui correspond à la hauteur et à la largeur d'une image de contenu unique et dont la propriété de débordement est définie sur masqué pour garantir qu'une seule image est affichée à la fois. C’est le seul CSS réellement requis pour que l’afficheur de contenu puisse atteindre un niveau de base. Si vous regardez la page maintenant, vous verrez que vous pouvez cliquer sur l'une des miniatures et que l'image pleine grandeur correspondante sera affichée dans le panneau de visualisation:
C’est génial car il reste fonctionnel et accessible sans recourir à JavaScript. Nous allons maintenant utiliser jQuery pour ajouter des effets de transition lisses dans un instant, mais nous devons d’abord ajouter quelques styles supplémentaires requis pour les animations et afficher correctement les paragraphes. Ajoutez le code suivant au bas de contentviewer.css:
#slider width: 2500px; hauteur: 500px; #slider div float: left; position: relative; #slider p position: absolute; en bas: 0; gauche: 0; couleur: #fff; police: 16px "Trebuchet MS"; marge: 0; largeur: 90%; hauteur: 45px; rembourrage: 5px 5% 10px; couleur de fond: # 000;
Le conteneur intérieur (#slider) se voit attribuer une hauteur fixe égale à une seule image de contenu, mais une largeur égale à toutes les images. Ensuite, les conteneurs individuels contenant les images et les paragraphes sont placés à gauche pour les empiler horizontalement. Enfin, les paragraphes sont stylés et positionnés de manière à superposer chaque image:
Il n'est pas strictement nécessaire de faire flotter les panneaux de contenu individuels vers la gauche et de définir la taille du curseur. Sans cela, les images s'empileront verticalement. Cela signifie que toutes les animations que nous avons ajoutées devront également déplacer les panneaux de contenu verticalement, mais nous les animerons horizontalement..
Un point que je devrais souligner ici est que le code jusqu’à présent ne fonctionne pas dans Opera; Pour une raison quelconque, Opera ne peut pas utiliser les ancres de la page pour afficher les différents panneaux de contenu lorsque l'utilisateur clique sur l'un des éléments de navigation. Ceci est un gros échec et semble être un problème dans plus d'une version d'Opera. Apparemment, il existe un correctif et quiconque utilise Opera en tant que navigateur principal l’aura déjà, espérons-le, implémenté. Ce n'est pas un problème quand le JavaScript a été ajouté mais.
Comme la page fonctionne maintenant de manière autonome, nous pouvons ajouter le code JavaScript qui transformera cette page fonctionnelle en une interface attrayante. Nous avons laissé un videy
Accentsconagua