Aujourd'hui, nous allons créer une simple page Web avec un outil étonnant et gratuit: Cu3er.
Cu3er est un curseur d'image 3D vraiment soigné avec des transitions visuelles délirantes et de nombreuses options de personnalisation. Bien qu'il soit construit avec Flash et JavaScript, vous n'avez pas besoin de connaître l'un ou l'autre pour l'utiliser.
Dans cet article, nous allons construire la page et le diaporama. La prochaine fois, nous reviendrons et verrons comment personnaliser certaines des nombreuses fonctionnalités et variables de Cu3er.
Ce que nous construisons
Pour voir à quel point il est facile d'incorporer Cu3er à une conception, nous allons créer une simple page Web contenant un en-tête, un pied de page, une copie de paragraphe et une zone de navigation.
Avant de commencer, vous souhaiterez peut-être consulter la démo et télécharger les fichiers source.
Remarque: Dans mes propres tests, cu3er fonctionne très bien dans Safari et Firefox, mais a quelques problèmes dans IE (surprise). En raison de cela et du peu de CSS3 que nous allons utiliser, assurez-vous de voir la démo dans Firefox ou Safari.
Pour garder les choses intéressantes, nous allons également utiliser un peu de CSS3 et apprendre à configurer un "pied collant"? qui reste ancré au bas de la page. Commençons!
Étape 1: Prenez Cu3er
La première chose à faire est de vous rendre sur le site Web de Cu3er et de cliquer sur le bouton de téléchargement. Lorsque vous ouvrez le fichier .zip, vous devriez voir les fichiers suivants:
La première chose à faire est de copier l'intégralité de ce dossier et de le ranger dans un endroit sûr afin de pouvoir toujours revenir aux versions d'origine de tout ou partie des fichiers.
Une fois que vous avez fait cela, ouvrez demo.htm dans votre éditeur de texte ou IDE préféré.
Étape 2: Personnaliser la page de démonstration
Lorsque vous ouvrez la page de démonstration, vous constaterez qu’elle est assez simple et contient déjà un div centré avec une version de travail de cu3er. Je vous ai dit que ce serait facile!
Nous avons seulement besoin d'ajouter du contenu et de redéfinir le style de cette page et nous aurons tous terminé. Pour commencer ce processus, remplacez les commentaires de l'étape 1, de l'étape 2, etc. tête partie du document et ajouter quelque chose de plus descriptif. Supprimez également tout style en ligne et insérez un lien vers une feuille de style externe. Vous devriez avoir quelque chose comme ce qui suit.
Passons en revue ces morceaux de code, un à la fois. Tout d’abord, j’ai ajouté une simple réinitialisation des marges et des marges, mais assurez-vous que les différents paramètres par défaut du navigateur ne gâchent pas notre présentation. Ensuite, Chris Coyier, de CSS-Tricks, m'a appris un truc pour nettoyer les flotteurs (donc criez dessus si vous pensez que ce n'est pas sémantique). Nous allons lancer quelques éléments dans cette conception et maintenant que nous avons configuré ce CSS, nous pouvons simplement ajouter une .clearDiv classe pour s’assurer que le contenu suivant cette section sera réinitialisé à l’endroit où nous le voulons.
Ensuite, j'ai affecté quelques styles de texte, tels que font-family et font-weight. J'ai également défini l'arrière-plan sur un gris foncé et inséré un graphique d'en-tête. Veillez à ce que la tranche d'en-tête soit répétée de manière à obtenir une barre s'étendant sur toute la page. Enfin, j'ai réglé la hauteur à 100% et je me suis assuré que ces styles étaient appliqués à la fois aux parties html et body. Cela concerne le truc collant que nous installerons plus tard. Pour l'instant, assurez-vous que ces styles sont présents.
Votre fichier devrait maintenant bien se présenter et ressembler à l'image ci-dessous.
Étape 5: Donnez un style à la page et à l'en-tête
Ensuite, ajoutez le texte suivant à votre CSS:
Ici, nous avons réglé le retour à la page sur 850px (un peu peu orthodoxe, mais cela semblait juste) et notre marge sur auto. Cela centre tout notre contenu bien dans la fenêtre du navigateur.
Ensuite, j'ai défini le texte en blanc, je l'ai laissé flotter à la gauche, séparé du haut et assigné une famille et une taille de police. Cela devrait positionner le? Design Shack? texte bien dans votre aperçu.
Étape 6: Positionnez le diaporama
Avant d’ajouter la navigation dans l’en-tête, nous devons éliminer le diaporama. Pour ce faire, commencez par placer la classe clearDiv dont nous avons parlé précédemment après l'en-tête et avant le diaporama dans votre code HTML.
Maintenant que nous avons effacé le flotteur de l'en-tête, nous pouvons aller dans notre CSS et ajouter quelques styles pour le diaporama.
Ici, nous avons ajouté l'essentiel du style à l'emballage du diaporama. C’est pour que nous puissions garder le cu3er-conteneur div à 600px (la largeur du diaporama) tout en ayant un graphique ombré qui s'étend au-delà de cette limite.
Vous pouvez créer votre propre ombre dans Photoshop ou simplement extraire la mienne des fichiers source.
Maintenant, votre diaporama doit être parfaitement positionné sur un joli graphique ombré pour lui donner une sorte d’illusion flottante.
Étape 6: Ajouter la navigation
Maintenant que le diaporama est hors de notre chemin, nous pouvons ajouter dans la zone de navigation. Nous allons garder cette base et utiliser une liste non ordonnée de liens. Comme pour l'en-tête, la navigation utilisera un float, placez donc le code HTML de navigation après l'en-tête et avant le clearDiv.
Nous avons maintenant besoin d’une grande quantité de CSS pour styliser tout ce qui est impliqué dans la navigation. Nous devons couvrir la navigation div dans son ensemble, la liste non ordonnée, les éléments de liste, les liens d’élément de liste et les effets de survol de lien d’élément de liste.
Tout ici est assez simple. La navigation est flottée à droite (elle est placée à droite de la page et les éléments sont alignés), en blanc, positionnée et transformée en majuscule. Nous avons défini le style de liste sur none pour supprimer les points de puce et éliminer toute décoration de texte de lien, sauf en survol, où nous avons appliqué un soulignement.
Et avec ça notre navigation est finie. Maintenant, tout ce qui reste est un texte superflu et le pied de page et nous serons tous terminés!
Étape 7: Ajouter le texte sous le diaporama
Juste pour compléter un peu le dessin, nous ajouterons un en-tête et un paragraphe sous le diaporama. Quelques lignes de code HTML suffisent:
Ensuite, nous appelons les balises h1 et paragraphe individuellement. Remarquez que j'ai utilisé la technique de typographie que nous avons apprise dans l'article de Google Fonts. Cela utilise une ombre de texte CSS3 dont la couleur est plus claire que l'arrière-plan pour donner l'illusion d'un texte incrusté.
Cela nous amène à la fin de la plupart de notre conception. Vous pouvez même vous arrêter ici si vous le souhaitez, mais je vais continuer et vous montrer une astuce de pied de page collante que j'ai apprise cette semaine.
L'image que nous utilisons ci-dessous pour le pied de page est exactement la même que l'image d'en-tête, elle ne fait que pivoter de 108 degrés, de sorte que le rouge est en haut et le noir en bas.
Dernière étape: Ajouter le pied de page
Si vous vous demandez ce qu'est un pied de page collant, il s'agit simplement d'un pied de page qui adhère au bas de la page lorsque vous redimensionnez la fenêtre. Cela peut être délicat à mettre en œuvre, mais Ryan Fait a créé une méthode assez ingénieuse pour le réaliser avec très peu de code. voir cette méthode ici.
L'idée de base est que vous pouvez utiliser des marges négatives et un? Push? garder le pied de page au bas de la page. La première chose à faire est d’insérer les divs push et footer dans notre code HTML. Placez le séparateur push à l'intérieur du saut de page et le séparateur de pied de page à l'extérieur du saut de page (pour qu'il s'étende jusqu'aux bords.)
Maintenant, allez dans votre CSS et insérez le code suivant:
Notez que la hauteur de la poussée a été définie sur la hauteur exacte du pied de page. C'est très important et l'astuce ne fonctionnera pas sans elle. J'ai également placé dans l'image de fond que j'ai mentionnée ci-dessus (il suffit de faire pivoter l'image d'en-tête).
Enfin, nous ajouterons un extrait de code CSS dans notre page:
La hauteur et la hauteur minimale ont été définies à 100% et la marge inférieure à la valeur négative de la hauteur du pied de page (55px). Cela crée l’effet de garder le pied de page au bas de la page. le hauteur: auto! important; peu est un hack IE pour se déplacer hauteur min problèmes avec ce navigateur.
Résultat final
Notre page est complète! Si vous avez tout fait correctement, votre page devrait ressembler à celle ci-dessous. Vous remarquerez peut-être que ma version démarre automatiquement au chargement de la page, ne vous inquiétez pas si la vôtre ne le fait pas, nous traiterons de cela dans le prochain article.
Vous avez maintenant une page géniale avec un curseur d'image flash 3D époustouflant pour commencer à créer un site de portefeuille.
Conclusion
Notez que pratiquement tout le travail impliqué consistait à configurer le site Web.Cu3er fonctionnait parfaitement dès la première étape! Revenez bientôt pour la deuxième partie où nous apprendrons à peaufiner certaines des fonctionnalités de base, à ajouter du texte et des liens, etc.