Share
Aujourd'hui, nous poursuivons la série de didacticiels sur la création du design ShutterPress en le convertissant d'un PSD brut en un site Web fonctionnel utilisant HTML et CSS. À ce jour, nous avons créé la conception initiale du site et rassemblé les actifs requis pour le codage. Maintenant, nous allons réellement coder pour que ça marche dans tous les principaux navigateurs!
Aujourd’hui, il s’agit de convertir notre conception PSD en un site HTML entièrement fonctionnel! Nous vous guiderons pas à pas dans le balisage jusqu'à ce que nous ayons un site qui soit superbe sur tous les principaux navigateurs. Nous approcherons cela d'un intermédiaire niveau de compréhension, donc si nous dépassons trop rapidement l'une des étapes de base, n'hésitez pas à poser des questions spécifiques dans la section Commentaires ci-dessous.
Un cri spécial va à CodeMyConcept, qui a gracieusement fourni le code et le tutoriel pour ce jour de la série!
Si vous avez manqué les deux jours précédents de cette série, consultez-les ici:
Ok, avec nos objectifs maintenant clairement définis, commençons!
Premièrement, nous commençons par créer la structure de dossiers de base de notre projet, ce dont nous avons absolument besoin pour maintenir les actifs bien structurés et organisés..
Dans ce cas, nous aurons besoin d’un dossier "css" avec notre fichier css principal, d’un dossier "images" et d’un dossier "js" (Javascript) une fois que le code HTML et CSS est terminé afin que nous puissions ajouter le curseur, la zone de liste déroulante. et plugins accordéon. Aussi le fichier index.html dans le dossier racine
Ensuite, nous créons la structure HTML de base de la présentation avec les sections Gauche et Droite. Nous allons utiliser un div d'emballage pour tout contenir et tout centrer et nos conteneurs Gauche et Droite à l'intérieur, ainsi qu'un div en haut et en bas de l'emballage pour nous aider à réduire les angles arrondis tout en conservant une structure souple..
ShutterPress LEFFT MENU ICIDROIT CONTENU ICI
Nous préférons en fait créer le code HTML avant d’écrire un code CSS, bien que certaines personnes fassent une section de HTML et de CSS en même temps, puis passent à la section suivante. Nous avons constaté que faire d'abord tout le code HTML nous aide à penser au CSS à l'avance et à tout ce qui pourrait être nécessaire, comme Javascript ou PHP. Tout ce que j'ajoute à ce stade, c'est ma réinitialisation CSS.
Nous commençons donc par coder le menu de gauche. Ici, nous allons avoir besoin d’une balise h1 et d’un lien pour notre logo, ainsi que d’une liste non ordonnée pour nos éléments de menu. Nous devons également imbriquer une autre liste non ordonnée sur la troisième balise li de notre sous-menu et faire de même avec des éléments fictifs sur la deuxième balise li afin que nous puissions voir notre accordéon javascript fonctionner plus tard..
Nous devons également ajouter des classes "ouvertes" et "fermées" aux liens et au sous-menu afin de pouvoir contrôler les icônes et les sous-menus ouverts par défaut, ainsi que la classe active pour mettre en surbrillance la page en cours d'affichage..
ShutterPress
Maintenant, juste après cela viennent les icônes sociales et le champ de recherche dans notre section de gauche située en bas. Nous allons donc créer un conteneur div pour la section inférieure et séparer [divs] pour chacune des deux parties à l'intérieur de ce conteneur..
Pour les icônes sociales, nous aurons besoin d'une étendue pour le texte et d'une liste pour les icônes, chacune avec une classe pour obtenir l'image correcte de l'icône et son état de survol respectif..
Pour la section Recherche, nous allons créer un formulaire et des divs contenant les entrées correspondantes afin de les faire flotter et d'ajouter les arrière-plans et les icônes. Faire cela plutôt que d'appliquer les styles directement aux entrées fonctionne beaucoup mieux pour éviter les problèmes de navigation croisée avec les hauteurs de ligne et l'indentation du texte..
Social:
- tumblr
- picasa
- vimeo
- Flickr
- gazouillement
- rss
Alors, voici à quoi ça ressemble dans notre navigateur avec le CSS Reset
Maintenant que nous avons terminé notre menu de gauche, nous pouvons commencer à coder la partie Contenu de droite pour la galerie de vignettes..
Nous avons donc d’abord créé une liste non ordonnée d’images dans des liens afin qu’ils puissent être cliqués pour notre plugin lightbox, puis nous avons créé une div qui contiendrait nos boutons précédent et suivant..
À ce stade, nous devons commencer à découper les miniatures et à les enregistrer avec leur nom correspondant depuis le code HTML afin de pouvoir afficher certaines images en ligne..
Voici comment tout notre code HTML devrait être dans Firefox
Maintenant, pour certains styles, définissons des paramètres généraux pour les couleurs des polices, du texte et des liens, ainsi que pour l'image de fond.
Accentsconagua
/ * ------------------------------ * / / * RESET GENERAL * / / * -------- -------------------- * / html, body, div, span, applet, objet, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, un, abbr, acronyme, adresse, grand, citer, code, del, dfn, em, police, img, ins, kbd, q, s, samp, petit, grève, fort, sous, sup, tt, var, b, u, i, centre, dl, dt, dd, ol, ul, li, formulaire, étiquette, légende, tableau, légende, tableau, légende, tbody, tfoot, thead, tr, th, td, heure, bouton marge: 0; rembourrage: 0; bordure: 0; contour: 0; taille de police: 100%; alignement vertical: ligne de base; fond: aucun; ol, ul style de liste: aucun; h1, h2, h3, h4, h5, h6, li hauteur de ligne: 100%; blockquote, q guillemets: aucun; q: avant, q: après content: "; table border-collapse: collapse; border-spacing: 0; entrée, texte, texte, sélectionnez police: 11px Arial, Helvetica, sans-serif; alignement vertical: milieu; remplissage: 0; marge: 0; entrée: focus, texte, zone: focus contour: aucun; formulaire, fieldset style de bordure: aucun; html, corps marge: 0; remplissage: 0; hauteur minimum: 100%; / * - --------------------------------*/ /* RÉGLAGES GÉNÉRAUX */ /*-------- ----------------------- * / body height: 100%; police: 12px / 12px "Lucida Sans", "Lucida Grande", sans-serif ; color: # 000; background: url ('? /images/bg.jpg') répéter #fff; a text-decoration: none; color: # 000; a: survol text-decoration: none; color : # 0285da; Ensuite, nous définissons les styles de wrapper pour pouvoir construire la base de notre mise en page. Nous commençons par définir la largeur de notre wrapper et nous la centrons avec une marge: 0 auto;
Pour les divisions supérieure et inférieure que nous avons définies précédemment, nous définissons des images d'arrière-plan et les dimensions requises pour créer nos coins arrondis supérieur et inférieur. Pour le wrapper, nous définissons une image d'arrière-plan répétée dans l'axe des ordonnées qui recouvrira notre contenu. la ligne de séparation entre les contenus gauche et droit.
Pour la division wrapper-bottom, nous devons définir un clear: both; car une fois que je flotte mes conteneurs droit et gauche, l'emballage va s'effondrer, nous devons donc empêcher cela en nettoyant les flotteurs.
/ * -------------------------- * / / * WRAPPER * / / * ------------- ----------- * / # wrapper-top background: url ("? /images/content-top.jpg") non-répétez défilement centre haut #FFFFFF; hauteur: 18px; largeur: 994px; #wrapper width: 994px; débordement caché; marge: auto 64px; background: url ("? /images/content-bg.jpg") répéter-y faire défiler le centre du centre #FFFFFF; # wrapper-bottom background: url ("? /images/content-bottom.jpg") No-repeat scroll center top #FFFFFF; hauteur: 61px; largeur: 994px; clarifier les deux; 
Voici le résultat dans notre navigateur:
Maintenant que notre emballage est prêt, nous pouvons passer au contenu: tout d'abord, nous définissons la largeur des conteneurs de droite et de gauche de manière à pouvoir les faire flotter à la bonne position..
/ * -------------------------- * / / * MENU GAUCHE * / / * ------------ ------------ * / / * Menu principal * / #left width: 235px; float: gauche; / * ------------------------------ * / / * CONTENU DROIT * / / * ------- --------------------- * / / * Contenu de la galerie de vignettes * / #right width: 758px; Flotter à droite;
Nous commençons maintenant à styler la navigation en créant une image sprite pour le logo, les boutons et les icônes sur le dessin..
Cette disposition particulière ne semble pas devoir prendre de la hauteur, mais nous souhaitons tout de même garder une certaine flexibilité au cas où nous aurions besoin d'ajouter plus d'éléments à la navigation..
Nous avons donc configuré le conteneur Left avec une hauteur minimale afin que le div gauche-inférieur puisse être positionné de manière absolue sans avoir à utiliser une marge énorme pour le pousser vers le bas. Ainsi, si de nouveaux éléments sont ajoutés, la mise en page conserve ses dimensions d'origine..
Nous avons également configuré les liens dans la navigation pour qu'ils s'affichent sous forme de blocs afin que toute la zone puisse être cliquée et pas seulement le texte. Nous ajoutons les fonds ouverts et fermés à l'aide de leurs classements respectifs et du réglage de la position de notre sprite..
Le sous-menu avec une classe 'closed' est configuré pour afficher: aucun; de sorte que seul celui par défaut montre.
/ * -------------------------- * / / * MENU GAUCHE * / / * ------------ ------------ * / / * Menu principal * / #left width: 235px; float: gauche; hauteur min .: 615px; position: relative; #left .logo a background: url ("? /images/sprite.png") no-repeat scroll 0 0 transparent; bloc de visualisation; hauteur: 32px; marge: 8px auto 0; retrait du texte: -999999px; largeur: 190px; #left .menu width: 100%; border-top: 1px solid #eaeaea; marge supérieure: 30px; #left .menu li a display: block; hauteur: 35px; hauteur de ligne: 35px; padding-left: 22px; border-bottom: 1px solid #eaeaea; #left .menu li a.active color: # 0285DA; border-right: 1px solid #fff; #left .menu li a.closed background: url ("? /images/sprite.png") no-repeat scroll 46px -231px transparent; #left .menu li a.opened background: url ("? /images/sprite.png") no-repeat scroll 46px -257px transparent; #left .menu li .sous-menu li a padding-left: 38px; #left .menu .sub-menu.closed display: none; # left-bottom position: absolute; en bas: 0; largeur: 100%; Pour les icônes sociales inférieures, nous configurons les images à l'aide de la classe respective et les images d'arrière-plan à l'aide de postions, cela s'applique également au statut de survol.
/ * Social * / # gauche-bas .social débordement: masqué; hauteur: 34px; border-top: 1px solid #eaeaea; border-bottom: 1px solid #eaeaea; padding-left: 25px; # gauche-bas .social span float: left; hauteur de ligne: 34px; # en bas à gauche .social ul float: left; marge: 9px 0 0 10px; # en bas à gauche .social ul li float: left; hauteur: 34px; # left-bottom .social ul li a background: url ("? /images/sprite.png") no-repeat scroll -5px -50px transparent; bloc de visualisation; hauteur: 16px; largeur: 16px; marge: 0 5 px 0 0; retrait du texte: -999999px; # gauche en bas .social ul li a: survoler background-position: -5px -80px; # en bas à gauche .social ul li a.picasa position-arrière-plan: -26px -50px; # en bas à gauche .social ul li a.picasa: survolez background-position: -26px -80px; # gauche-en-bas .social ul li a.vimeo position-arrière-plan: -47px -50px; # gauche-bas .social ul li a.vimeo: survolez background-position: -47px -80px; Et pour la partie recherche, nous faisons essentiellement flotter les divs du conteneur d’entrée et leur attribuer les styles plutôt que l’entrée.
/ * Search * / # left-bottom .search débordement: masqué; marge supérieure: 12px; # left-bottom .search .left background: url ("? /images/sprite.png") no-repeat scroll -5px -203px transparent; float: gauche; hauteur: 27px; marge gauche: 20px; remplissage: 6px 0 0 10px; largeur: 158px; # entrée gauche .search .left input border: none; fond: transparent; largeur: 100%; # left-bottom .search .right background: url ("? /images/sprite.png") no-repeat scroll -173px -203px transparent; float: gauche; hauteur: 27px; # recherche en bas à gauche .search .right input background: aucune répétition scroll 0 0 transparent; bordure: moyenne aucune; curseur: pointeur; hauteur: 27px; largeur: 27px; Alors, voici ce que nous avons en ce moment dans Firefox
Ici, nous flottons simplement les éléments de la liste pour obtenir un affichage en grille, nous ajoutons un remplissage, une couleur d'arrière-plan et des bordures pour obtenir un cadre pour chaque miniature et également des marges de séparation..
Finalement. nous avons nos boutons avec un conteneur div qui est centré et les deux liens sont flottants.
/ * ------------------------------ * / / * CONTENU DROIT * / / * -------- -------------------- * / / * Contenu de la galerie de vignettes * / #right width: 758px; Flotter à droite; #right .thumbnails overflow: hidden; remplissage: 10px 0 0 32px; #right .thumbnails li float: left; marge: 0 21px 18px 0; #right .thumbnails li un border: 1px solid #eaeaea; rembourrage: 2px; arrière-plan: # f2f2f2; bloc de visualisation; #right .navigation margin: -10px auto 0; débordement caché; largeur: 50px; #right .navigation a background: url ("? /images/sprite.png") no-repeat scroll 0 0 transparent; bloc de visualisation; float: gauche; hauteur: 21px; retrait du texte: -999999px; largeur: 21px; #right .navigation .prev background-position: -159px -75px; marge: 0 8 pixels 0 0; #right .navigation .next background-position: -186px -75px; Voici notre première page terminée en firefox!
En ce qui concerne notre sous-page, ce que nous faisons est de dupliquer notre index.html et de le nommer comme quelque chose comme subpage.html ou inner.html, puis nous extrayons tout le contenu de notre conteneur #right et commençons à créer le html nécessaire à notre galerie de curseurs. et les 3 modules ci-dessous.
Nous avons besoin d'un div pour contenir tout le balisage de mon diaporama, une liste d'images qui seront les diapositives et nous utiliserons également 3 versions différentes des images afin que nous puissions voir une action plus tard avec le plugin jQuery Cycle.
Nous définissons également une div vierge qui sera absolument positionnée au-dessus des images pour servir de cadre au cas où cette mise en page aurait besoin d'être implémentée dans un CMS pour obtenir du contenu dynamique. Si cela se produit, nous pouvons simplement ajouter une image sans avoir à Photoshop les coins arrondis et les ombres avant la main.
Et enfin, pour le diaporama, nous devons créer une div de navigation avec quelques liens pour notre navigation dans les galeries "précédente" et "suivante"..
Notre dernier bloc de contenu contient nos 3 modules placés dans leur propre conteneur, chaque module étant une div en elle-même que je vais flotter afin qu'ils soient côte à côte. À l'intérieur, j'ai une balise h2 pour le titre et un paragraphe pour le texte.
Premier module
Sed korem assis feugiat erat à ante vestibulum auctor. Cras rhoncus diam et sem gravida sagittis. Ut tempor sapien in neque ultrices varius. Lorem ipsum text.
Module deux
Pellentesque lacinia, augue vel venenatis commodo, angue neque tempor algue, semper rhoncus diam justo in ante. Aliquam dans les ultrices eleifend libero, in sit amen consectetur velit quis.
Module trois
Suspendisse porta sem vel enim molestie suscipit elementum leo porta. Cras lorem lectus, viverra sit amet semper quis, vehicula quis velit.
Dans cette conception particulière, obtenir le cadre des diapositives était un peu délicat, alors voici ce que nous avons fait:
Nous avons pris le calque appelé "Shape 90" et lâché le remplissage à 0%. Cliquez ensuite avec le bouton droit sur le calque intitulé "1720729_high", sélectionnez le masque de découpage, puis masquez le calque..
Retourné au calque "Forme 90" et définissez l'opacité à 50%. Cliquez avec le bouton droit sur le calque et faites une copie, sélectionnez les deux calques "Forme 90" et fusionnez-les.
Maintenant, vous pouvez enregistrer le cadre en tant que fichier .png transparent séparé et ajouter un peu de fond blanc dans les coins afin de recouvrir les images au verso..
Nous avons défini les dimensions des modules et les avons flottés pour les aligner; après cela, nous avons configuré les styles avec l'image-objet comme image de fond pour les icônes.
Nous plaçons les éléments de la liste du curseur pour avoir une position: absolute; en ce qui concerne l'ul afin qu'ils s'effondrent et ne ressemblent qu'à une seule image afin que nous puissions obtenir le véritable aspect de la mise en page, nous ajouterons les fonctionnalités une fois que tout sera prêt.
Les boutons précédent et suivant sont également positionnés de manière absolue afin que nous puissions les centrer verticalement.
/ * Contenu de la galerie de diaporama * / # gallery-holder position: relative; largeur: 719px; marge: auto 20px; hauteur: 442px; # gallery-holder .slideshow-frame background: url ("? /images/slideshow-frame.png") no-repeat scroll 0 0 transparent; hauteur: 442px; position: absolue; en haut: 0; gauche: 0; largeur: 719px; z-index: 10; # gallery-holder .slideshow li hauteur: 442px; position: absolue; en haut: 0; width: 719px # gallery-holder .navigation a hauteur: 92px; gauche: 0; marge supérieure: -44px; position: absolue; en haut: 50%; largeur: 47px; z-index: 15; # gallery-holder .navigation a.prev background-position: -6px -103px; marge supérieure: -44px; # gallery-holder .navigation a.next background-position: -65px -103px; gauche: auto; à droite: 0; # modules-holder overflow: hidden; marge supérieure: 24px; marge gauche: 20px; # modules-holder .module float: left; largeur: 204px; marge droite: 40px; # module-holder .module h2 taille de la police: 18px; poids de police: normal; marge inférieure: 5px; padding-left: 25px; # modules-holder .module h2.module-one background: url ("? /images/sprite.png") no-repeat scroll -128px -170px transparent; # modules-holder .module h2.module-two background: url ("? /images/sprite.png") no-repeat scroll -128px -140px transparent; # modules-holder .module h2.module-three background: url ("? /images/sprite.png") no-repeat scroll -128px -110px transparent; # module-holder .module p color: # 6a6a6a; hauteur de ligne: 15px; Après tout cela, nous pouvons voir que les titres des modules ont une police Museo qui n'est pas une police Web, nous allons donc devoir la configurer avec @ font-face. Nous avons donc passé la police à travers Font Squirrel (http://www.fontsquirrel.com/fontface/generator) et avons placé les polices dans leur propre dossier de polices à la racine de notre projet et avons configuré le CSS dans nos paramètres généraux à l'aide du bouton droit. chemins pour les polices.
/*---------------------------------*/ /* RÉGLAGES GÉNÉRAUX */ /*----- -------------------------- * / body height: 100%; police: 12px / 12px "Lucida Sans", "Lucida Grande", sans-serif; couleur: # 000; background: url ('? /images/bg.jpg') repeat #fff; a text-decoration: none; color: # 000; a: survol text-decoration: none; color: # 0285da; @ font-face font-family: 'Museo700'; src: url ('? /fonts/museo700-regular-webfont.eot'); src: url ('? /fonts/museo700-regular-webfont.eot?#iefix') format ('embedded-opentype'), url ('? /fonts/museo700-regular-webfont.woff') (url ('? / '), url ('? /fonts/museo700-normal-webfont.ttf ') format (' type réel '), url ('? /fonts/museo700-normal-webfont.svg#Museo700 ') format (' svg ') ; poids de police: normal; style de police: normal; Donc, tout ce que nous avons à faire maintenant est de définir la famille de polices sur nos balises h2, et maintenant notre deuxième page est complète..
# module-holder .module h2 font-family: 'Museo700'; taille de police: 18px; poids de police: normal; marge inférieure: 5px; padding-left: 25px;
Maintenant, pour ajouter quelques fonctionnalités et animations à notre projet, nous allons utiliser deux plugins: jQuery Cycle pour notre diaporama (http://jquery.malsup.com/cycle/) et prettyPhoto pour notre galerie de lightbox (http: // www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/), puis nous créerons une fonction personnalisée pour notre menu accordéon.
Assurez-vous de télécharger le plugin prettyPhoto et de copier les ressources nécessaires dans leurs dossiers respectifs (javascript dans le dossier "js", feuilles de style dans le dossier "css", etc.), le plugin cycle peut être lié à partir de Github et jQuery peut être lié depuis les API Google.
Nous allons également créer un fichier main.js dans notre dossier JS où nous pourrons mettre notre configuration personnalisée de fonction et de plugin..
Donc, nous référons notre feuille de style dans l'en-tête des fichiers HTML
ShutterPress
Nous référons également nos fichiers javascript au bas de notre document juste avant la balise html de clôture.