Conversion PSD / HTML: Coder une conception de site Web professionnel
Dans ce tutoriel de conversion PSD / HTML, nous allons prendre un modèle de conception Web PSD que je vous ai montré comment construire dans un précédent tutoriel et le transformer en un modèle HTML / CSS fonctionnel.
Ceci est la deuxième partie d'un tutoriel sur la création d'un site Web d'entreprise propre. Cette deuxième partie portera sur la conversion PSD / HTML et le codage de la maquette PSD créée dans la première partie.
Série "Site Web pour les entreprises"
Partie 1: Comment concevoir un site Web professionnel propre avec Photoshop
Partie 2: Conversion PSD / HTML: Coder une conception de site Web propre
Résultat final : démonstration en direct
Voici le modèle que nous cherchons à créer. Cliquez sur la capture d'écran ci-dessous pour voir la démonstration de travail en direct du modèle HTML.
Résultat final : Démonstration Live DemoLive du modèle HTML / CSS final
Avant de commencer ce tutoriel sur la conversion PSD / HTML
Assurez-vous de disposer du fichier Photoshop (PSD) que nous avons créé dans le premier didacticiel. Vous en aurez besoin pour extraire les images que nous inclurons dans le modèle.
Si vous n’avez pas encore terminé le didacticiel de la partie 1, je vous conseillerais de consulter ce premier didacticiel avant de commencer celui-ci (ou du moins de télécharger le fichier PSD de ce premier didacticiel).
Dans ce didacticiel (partie 2), je suppose que vous possédez des connaissances de base en HTML et en CSS. Toutefois, si vous avez des difficultés, laissez un commentaire ci-dessous et je ferai de mon mieux pour vous aider.
Création de la structure de fichier
1 Créez un nouveau dossier vide sur votre bureau appelé "modèle" (ou ce que vous préférez).
2 À l'intérieur de ce dossier vide, créez un autre dossier appelé "images". Ce dossier contiendra toutes les images à afficher dans le modèle.
3 Créez ensuite trois nouveaux fichiers et nommez-les index.html, style.css et reset.css.
Le fichier index.html est l'endroit où nous allons écrire tout le code HTML de notre modèle, tandis que le fichier style.css inclura tout le code de style CSS qui rendra tout beau et joli.
Configuration de reset.css
Dans le fichier reset.css, nous souhaitons utiliser une feuille de style de réinitialisation. La principale raison à cela est que les différents navigateurs ont tendance à présenter des incohérences dans la façon dont ils affichent différents éléments HTML (par exemple, la taille des polices des en-têtes, la taille des marges et du remplissage, etc.). L'utilisation d'une feuille de style de réinitialisation nous permet de réduire l'impact de ces incohérences.
4 Je vais utiliser Reset CSS d’Eric Meyer. Copiez le code CSS de réinitialisation dans votre propre fichier reset.css.
Ajouter le balisage HTML de base
5 Ouvrez maintenant votre fichier index.html à l'aide d'un éditeur de code. J’utiliserai Coda (un IDE de développement Web populaire pour Mac OS) pour ce didacticiel, mais vous pouvez utiliser l’application de votre choix. Ajoutez une structure de base pour une nouvelle page HTML - la plupart des applications d’édition de code source (telles que Coda et Adobe Dreamweaver) fournissent une fonction à cet effet (ou le font automatiquement pour vous). Voici le bloc de code pour votre balise HTML de base.
<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<tête>
<meta http-equiv = "Content-Type" content = "text / html; charset = UTF-8" />
<title> Mon modèle de site Web HTML </ title>
</ head>
<body>
</ body>
</ html>
Référencez vos feuilles de style
6 Dans les balises <head> de index.html, vous devez ajouter la ligne de code suivante pour faire référence à notre feuille de style principale.
<link rel = "stylesheet" type = "text / css" href = "style.css" media = "screen" />
Ceci indique à la page index.html où trouver votre feuille de style principale.
7 Ouvrez maintenant votre fichier style.css et ajoutez la ligne de code suivante en haut du document pour référencer également notre fichier reset.css.
@import "reset.css";
Cela garantit que le style de réinitialisation inclus dans le fichier reset.css est appelé avant l'une de nos autres feuilles de style CSS (ce qui est important en raison du modèle d'héritage CSS).
Excellent! Les trois fichiers sont maintenant connectés et se parlent, nous pouvons donc commencer à coder le thème.
La structure du template
Ci-dessous, vous pouvez voir la structure de présentation de base et les sections principales du modèle HTML / CSS. Étudiez-le un peu pour vous familiariser avec les différentes sections de notre mise en page Web.
Création de la structure de fichier
Coder la section de page de base
8 Nous allons commencer par créer la structure de base dans notre index.html. Ajoutez le bloc de code suivant pour les sections de présentation.
<div id = "wrap">
<div id = "header">
</ div> <! - fin en-tête ->
<div id = "Featured-Content">
</ div> <! - fin du contenu en vedette ->
<div id = "services">
</ div> <! - services finaux ->
<div id = "additional-info">
<div id = "client-testimonials">
</ div> <! - Témoignages de clients finaux ->
<div id = "projet-vedette">
</ div> <! - fin le projet en vedette ->
</ div> <! - end additional-info ->
<div id = "footer">
</ div> <! - end footer ->
</ div> <! - end wrap ->
Comme vous pouvez le constater, toutes les sections principales du modèle sont contenues dans le conteneur #wrap afin de nous permettre de centrer plus facilement notre page Web.
Les sections principales de notre présentation Web comprennent #header, # content-content, #services, # additionnel-informations (qui contient # témoignages de clients et # vedette-projets), et le #footer.
Créer l'arrière-plan du modèle CSS / HTML
9 Pour créer l'arrière-plan de notre modèle HTML / CSS, nous devons d'abord couper l'image d'arrière-plan du fichier PSD. Nous allons utiliser la même méthode pour découper les différents éléments d’arrière-plan CSS tout au long de ce didacticiel, et je vous résumerai ici un bref résumé de la procédure. Première étape : dans Photoshop, choisissez l'outil Rectangle de sélection (M) et faites une sélection étroite incluant l'en-tête et l'arrière-plan blanc.
Créer le fond
10 Une fois la sélection effectuée, accédez à Edition> Copier la fusion, créez un nouveau document Photoshop (Ctrl / Cmd + N), puis collez la sélection dans le nouveau document (Photoshop doit automatiquement déterminer les dimensions de la taille du nouveau document). basé sur l'image que vous avez dans le presse-papier).
11 Vous devez ensuite aller dans Fichier> Enregistrer pour Web et périphériques pour enregistrer le fichier. Choisissez le format de fichier GIF, puis enregistrez-le sous le nom main-bg.jpg dans votre dossier images.
12 Ajoutez maintenant le code suivant à votre fichier style.css pour définir l’arrière-plan.
/ * ----------------- STYLES GÉNÉRAUX ----------------- * /
body {background: url (images / main-bg.jpg) repeat-x; famille de polices: arial; }
#wrap {width: 960px; marge: 0 auto; }
Ici, nous attachons l’image d’arrière-plan au <body> du document HTML, puis nous la répétons sur la page le long de l’axe des x.
Nous définissons également la largeur de la mise en page et nous nous assurons qu'elle soit centrée sur l'écran (marge: 0 auto; centre la mise en page).
Ajout du logo
13 Nous voulons maintenant ajouter le logo à l'en-tête. Pour ce faire, nous devons d’abord l’extraire du PSD. Sélectionnez le calque sur lequel le logo est stocké, puis cliquez avec le bouton droit de la souris sur la vignette en regard du nom du calque (entouré ci-dessous).
Ajouter le logo
Cela sélectionnera le texte du logo pour vous.
Ajouter le logo
14 Copiez à nouveau ce texte, créez un nouveau document, puis collez-le dans le nouveau document.
15 Choisissez à nouveau Enregistrer pour Web et périphériques, choisissez PNG-24 comme format de fichier et enregistrez le fichier sous le nom logo.png dans le dossier images.
Nous utilisons le format de fichier PNG ici car nous souhaitons que l’image ait un fond transparent afin de pouvoir l’afficher facilement sur n’importe quelle couleur de fond.
16 Ajoutez maintenant le code HTML suivant à votre fichier index.html pour définir le balisage du nom / logo de notre site.
<div id = "header">
<h1> Studio de conception </ h1>
</ div>
17 Ensuite, nous devons styliser notre balisage pour définir logo.png comme image d’arrière-plan CSS de #header h1. Ajoutez ce bloc de code au fichier style.css.
/*---------------------ENTÊTE---------------------*/
#header {height: 130px; }
#header h1 {float: left; background: url (images / logo.png) no-repeat; largeur: 347px; hauteur: 66px; retrait du texte: -9999px; marge: 38px 0 0 0; }
Nous définissons d'abord la hauteur du conteneur d'en-tête, puis nous attachons l'image du logo à l'élément h1.
Nous utilisons une technique appelée remplacement d'image d'arrière-plan CSS, qui associe une image d'arrière-plan à un élément, puis déplace le contenu associé à l'élément hors de l'écran via l'utilisation de la paire attribut / valeur text-indent: -9999px.
L'approche de remplacement des images d'arrière-plan CSS offre certains avantages en matière de référencement et facilite également la compréhension du contenu de votre page par les lecteurs d'écran.
Créer la navigation
18 Pour créer la zone de navigation, ajoutez le code HTML suivant à votre fichier index.html.
<div id = "header">
<h1> Studio de conception </ h1>
<ul id = "nav">
<li> <a href="#"> Accueil </a> <span class = "nav-divider"> - </ span> </ li>
<li> <a href="#"> À propos de nous </a> <span class = "nav-divider"> - </ span> </ li>
<li> <a href="#"> Services </a> <span class = "nav-divider"> - </ span> </ li>
<li> <a href="#"> Portfolio </a> <span class = "nav-divider"> - </ span> </ li>
<li> <a href="#"> Contactez-nous </a> </ li>
</ ul>
</ div> <! - fin en-tête ->
19 Ajoutez maintenant le CSS suivant à votre fichier style.css.
#header #nav {float: right; marge: 72px 0 0 0; }
#header #nav li {float: left; taille de police: 16px; }
#header #nav a {color: #eee; texte-décoration: aucun; }
#header #nav a: hover {color: # 00aeef; }
#header #nav .nav-divider {color: #eee; rembourrage: 0 10px; }
C’est encore une fois assez simple: au départ, nous flottons le conteneur #nav vers la droite de la page et nous le déplaçons également à partir de 72 pixels de haut en utilisant l’attribut margin. Les éléments <li> sont ensuite flottés vers la gauche pour garantir que tous les noms de page sont affichés les uns à côté des autres et non sur des lignes séparées.
Le reste du code donne simplement un style aux liens et aux caractères "-" utilisés comme séparateurs entre les différents noms de page.
Coder la section Contenu en vedette
20 Pour créer cette section, nous devons découper plusieurs images de notre PSD. Le premier est le titre. Nous souhaitons suivre le même processus que celui utilisé précédemment pour découper le logo. Sélectionnez donc le calque dans lequel le titre est stocké dans le panneau Calques, cliquez avec le bouton droit de la souris sur la vignette de ce calque pour sélectionner le texte, copiez le texte, puis créez un nouveau document Photoshop.
21 Collez le texte dans le nouveau document, puis enregistrez le titre dans votre dossier images à l'aide de la commande Enregistrer pour le Web et les périphériques (appelez-la sélectionnée-content-content-title.png).
Coder la section Contenu en vedette
22 Faites ensuite exactement la même chose pour le sous-titre (nommez ce fichier Featured-Content-Subitle.png), la ligne en pointillé (Nommez cette horizontal-line.png) et le texte (Featured-Content-Text.png).
23 Maintenant que nous avons extrait toutes les images requises, nous devons écrire notre code HTML. Ajoutez le bloc de code suivant dans le conteneur # Featured-Content dans votre fichier index.html.
<div id = "Featured-Content">
<h2> Conception de sites Web propre et professionnelle </ h2>
<h3> Fournir des solutions Web de haute qualité </ h3>
<div class = "horizontal-line"> </ div>
<p> Nous fournissons des solutions Web de premier ordre aux organisations et petites entreprises cherchant à avoir un impact important en ligne. Nos services comprennent la conception Web, les campagnes de marketing en ligne et l'optimisation des moteurs de recherche. </ P>
<div class = "horizontal-line"> </ div>
</ div> <! - fin du contenu en vedette ->
24 Ajoutez ensuite le code suivant à votre fichier style.css pour styler nos éléments.
/ * ----------------- Outils ----------------- * / .horizontal-line {background: url (images / horizontal-line.png) pas de répétition; largeur: 950px; hauteur: 10px; }
/ * ------------ SECTION SUR LE CONTENU EN VEDETTE ------------ * /
# Featured-Content {margin: 65px 0 0 0; }
# vedette-contenu h2 {arrière-plan: url (images / Featured-section-title.png) no-repeat; largeur: 811px; hauteur: 66px; retrait du texte: -9999px; }
# selected-content h3 {background: url (images / Featured-section-subtitle.png) no-repeat; largeur: 720px; hauteur: 57px; marge: -8px 0 30px 1px; retrait du texte: -9999px; }
# vedette-contenu p {arrière-plan: url (images / Featured-section-text.png) no-repeat; largeur: 957px; hauteur: 126px; marge: 30px 0 25px 0; retrait du texte: -9999px; }
Dans ces blocs de code, nous commençons par déplacer la section # Featured-Content de 65 px en utilisant l'attribut margin.
Nous utilisons ensuite à nouveau la technique de remplacement des images CSS pour les éléments h2, h3 et p afin d'afficher les images que nous avons extraites.
Le style de la ligne horizontale (.horzontal-line) a été écrit dans une section séparée (en utilisant des commentaires CSS pour étiqueter les sections), car nous l’utiliserons également dans d’autres conteneurs. Cela aide à garder notre code propre et organisé.
Créer la section des services
25 Extrayons d’abord les images dont nous avons besoin de notre PSD. Nous avons besoin de l’arrière-plan bleu de la zone Services (enregistrez-le sous le nom services-box-bg.png), ainsi que de grands titres dans chacun de ces champs (enregistrez-le sous le format web-design-title.png, marketing-title.png et optimisation-title. .png respectivement), la ligne pointillée horizontale (service-dotted-line.png) et les boutons situés au bas de chacune des cases (get-more-details-button.jpg, view-case-studies-button.jpg et learn-more-button.jpg). Suivez le même processus pour extraire et enregistrer les images comme utilisé dans les étapes précédentes.
Créer la section des services
26 Ajoutez maintenant le code suivant dans le conteneur #services dans votre fichier index.html.
<div id = "services">
<div class = "service-boxfirst">
<h2 class = "titre-design-Web"> </ h2>
<div class = "service-dotted-line"> </ div>
<p> Nous fournissons des solutions de conception Web de tout premier ordre. Dès le début, nous travaillerons avec vous pour comprendre vos exigences et nous veillerons à ce que vous soyez satisfait du site final que vous achetez. </ P>
<a href="#" class="more-details"> </a>
</ div> <! - fin service-box ->
<div class = "service-box">
<h2 class = "marketing-title"> </ h2>
<div class = "service-dotted-line"> </ div>
<p> Nous pouvons vous aider à promouvoir votre entreprise dans les mondes en ligne et hors ligne. Nous sommes spécialisés dans divers domaines allant des campagnes de marketing viral à la gestion de comptes de publicité payée pour vous. Votre marque sera entre de bonnes mains avec nous. </ P>
<a href="#" class="view-case-studies-button"> </a> </ div>
<! - fin service-box ->
<div class = "service-box">
<h2 class = "optimisation-title"> </ h2>
<div class = "service-dotted-line"> </ div>
<p> Vous souhaitez générer davantage de trafic sur votre site? Vous êtes au bon endroit! Nous pouvons augmenter le trafic sur votre site de manière organique et efficace, afin que davantage de personnes soient au courant de votre activité et des produits / services que vous proposez. </ p>
<a href="#" class="learn-more-button"> </a> </ div> <! - fin service-box ->
</ div> <! - services finaux ->
<div class = "horizontal-line"> </ div>
Dans ce bloc de code, nous ajoutons trois nouveaux conteneurs auxquels est attribuée une classe de .service-box. Dans chacune de ces boîtes de service se trouvent un titre, une ligne en pointillé, le contenu textuel de cette boîte et un bouton.
Une classe de .first est également affectée à la première boîte de service (class = "service-box first") car nous devons modifier légèrement le style de ce conteneur par rapport aux autres.
27 Maintenant, ajoutez le CSS suivant à votre feuille de style principale pour styler notre section Services.
/*--------------------PRESTATIONS DE SERVICE--------------------*/
#services {padding: 40px 0; hauteur: 355px; }
#services .service-box {float: left; fond: url (images / service-box-bg.png) no-repeat; largeur: 233px; hauteur: 301px; marge: 0 0 0 46px; remplissage: 22px 28px 30px 26px; }
#services .first {margin-left: 0; }
#services .service-box h2 {margin: 0 auto; }
.web-design-title {background: url (images / web-design-title.png) no-repeat; largeur: 186px; hauteur: 48px; }
.marketing-title {background: url (images / marketing-title.png) no-repeat; largeur: 186px; hauteur: 48px; }
.optimization-title {background: url (images / optimization-title.png) no-repeat; largeur: 200px; hauteur: 48px;}
.service-dotted-line {background: url (images / service-dotted-line.png) no-repeat; largeur: 237px; hauteur: 3px; marge: 10px 0 24px 0; }
#services p {taille de la police: 14px; couleur: #fff; hauteur de ligne: 21px; text-align: center; marge: 0 0 24px 0; }
#services .more-details {display: block; fond: url (images / get-more-details-button.jpg) no-repeat; largeur: 232px; hauteur: 41px; }
#services .view-case-studies-button {display: block; fond: url (images / view-case-studies-button.jpg) non répétée; largeur: 232px; hauteur: 41px; }
#services .learn-more-button {display: block; arrière-plan: url (images / learn-more-button.jpg) no-repeat; largeur: 232px; hauteur: 41px; }
Le code ci-dessus utilise à nouveau la technique de remplacement des images d'arrière-plan CSS si nécessaire pour afficher les images appropriées.
Le reste consiste généralement à définir le rembourrage et les marges sur les différents éléments pour le positionnement et l'espacement des différents éléments.
Une chose à noter est que la marge gauche de la classe .service-box est définie sur 46px. Ceci permet de fournir un espacement constant entre les différentes boîtes de service. Toutefois, si la marge gauche est définie sur 46px dans la première case, elle ne sera pas sur le côté gauche du modèle et aura l’air un peu étrange.
Pour remédier à cette bizarrerie, nous avons donc défini la marge 0 de la classe .first sur 0 afin de remplacer la valeur de l'attribut de marge d'origine du style .service-box, en veillant à ce que la première zone de service soit correctement alignée sur le côté gauche du modèle.
Faites la section Témoignages de clients
28 Nous devons découper le titre de cette section. Utilisez le même processus que précédemment et enregistrez le fichier en tant que client-testimonials-title.png.
Faites la section Témoignages de clients
29 Ajoutez le code suivant dans le conteneur # client-testimonials dans index.html.
<div id = "client-testimonials">
<h3> Témoignages de clients </ h3>
<div class = "testimonial">
<div class = "author-img">
<img src = "images / author-img-1.jpg" alt = "Sarah Johnson" />
</ div> <! - end author-img ->
<p> "Les studios de design ont créé un site Web magnifique et ont été un plaisir de travailler avec ..." </ p>
<p class = "author-name"> Sarah Johnson </ p>
<a href="#"> Médias de conception Web </a>
</ div> <! - Fin du témoignage ->
<div class = "testimonial">
<div class = "author-img">
<img src = "images / author-img-2.jpg" alt = "Kate Saunders" />
</ div> <! - end author-img ->
<p> "Je n'ai que de bonnes choses à dire. Je recommande fortement DS pour le travail de promotion en ligne ..." </ p>
<p class = "author-name"> Kate Saunders </ p>
<a href="#"> Solutions logicielles </a>
</ div> <! - Fin du témoignage ->
<div class = "testimonial">
<div class = "author-img">
<img src = "images / author-img-3.jpg" alt = "Dave Cole" />
</ div> <! - end author-img ->
<p> "Les studios de design ont accru le trafic sur mon site de plus de 200% en trois mois - c'est un travail fantastique!" </ p>
<p class = "author-name"> Dave Cole </ p>
<a href="#"> Services Web globaux </a>
</ div> <! - Fin du témoignage ->
</ div> <! - Témoignages de clients finaux ->
C’est assez simple: nous avons trois nouveaux conteneurs .testimonial qui contiennent chacun une image de l’auteur du témoignage, le texte du témoignage, le nom de l’auteur, ainsi que le nom de leur société / organisation.
30 Ajoutez maintenant le CSS suivant à votre fichier style.css.
/*----------------ADDITIONAL INFO-----------------*/ #additional-info { margin: 38px 0 0 0; height: 420px; }
#additional-info #client-testimonials { float: left; width: 425px; padding: 0 45px 0 0; }
#additional-info #client-testimonials h3 { background: url(images/client-testimonials-title.png) no-repeat; width: 180px; height: 28px; margin: 0 0 24px -5px; text-indent: -9999px; }
.testimonial { margin: 0 0 32px -5px; }
.testimonial .author-img { float: left; background-color: #ccc; width: 84px; height: 84px; margin: 4px 28px 0 5px; }
.testimonial img { margin: 3px 0 0 3px; }
.testimonial p { color: #555; font-size: 14px; line-height: 21px; margin: 0 0 12px 0; }
.testimonial p.author-name { font-weight: bold; margin: 0; }
.testimonial a { color: #00aeef; font-size: 14px; text-decoration: none; }
.testimonial a:hover { color: #555; }
Les trois premières lignes du bloc de code ci-dessus concernent toutes le conteneur parent #additional-info - la hauteur du conteneur est définie avec les marges.
Un des points clés ici est que la largeur du conteneur #client-testimonials est réglée à 425px avec 45px de rembourrage à droite. Ce doit être la même chose pour cette section et pour la section "Projet en vedette" (nous parlerons de cette section plus loin dans le tutoriel) car elles utilisent toutes les deux la moitié de l'écran.
31 Entre ces deux conteneurs, nous devons ajouter la ligne verticale et l'utiliser comme séparateur. Découpez cette image du fichier PSD et enregistrez-la en tant que vertical-line.png.
Faire de la section Témoignages des clients
32 Ajoutez maintenant la ligne de code suivante entre les conteneurs #client-testimonials et #featured-project dans votre fichier index.html.
<div class="vertical-line"><</div> class="vertical-line"></div>
33 Incluez ensuite ce bloc de code CSS dans la classe .horizontal-line que nous avons définie précédemment.
.vertical-line { float : left ; background : url(images/vertical-line.png) no-repeat ; width : 4px ; height : 385px ; }
Le CSS ci-dessus garantit que la ligne verticale est affichée entre les deux sections différentes.
Faire la section "Projet en vedette
34 Comme pour la section des témoignages de clients, nous devons découper la rubrique " Projet en vedette " de notre modèle de DSP. Enregistrez le fichier en tant que featured-project-title.png.
Faire la section "Projet en vedette
35 Ajoutez maintenant le bloc de code HTML suivant à votre fichier index.html.
<div id="featured-project"> <div id="featured-project
<h3>Projet en vedette </h3>>Projet en vedette
<h4>Campagne de marketing en ligne de Yoshi </h4> Campagne de marketing en ligne de Yoshi
<img src="images/image.png" alt="Yoshi Screenshot" />
<p>Ce projet consistait à organiser une campagne de marketing en ligne pour aider à promouvoir la marque Yoshi. Cela s'est traduit par une augmentation de 200 % des ventes de Yoshi sur une période de six mois. </p>
<a href="#">Cliquez ici pour plus de détails >></a>
</div><!--finir-projet-caractérisé->>
36 Ajoutez ensuite ce bloc de code CSS à votre fichier style.css pour styliser la section "Projet vedette".
/*----------------------------PROJET VEDETTE----------------------------*/
#projet vedette { flotteur : gauche ; marge : 0 0 0 0 45px ; largeur : 425px ; }
#Projet-projet vedette h3 {arrière-plan : url(images/featured-project-title.png) no-repeat ; largeur : 160px ; hauteur : 32px ; marge : 0 0 0 16px -5px ; retrait-texte : -999999px ; }
#Featured-project h4 { font-size : 20px ; color : #8888 ; poids de la police : normal ; marge : 0 0 0 8px 0 ; }
#img { marge : 0 0 0 7px 0 ; }
#projet vedette p { font-size : 14px ; couleur : #5555 ; hauteur de la ligne : 21px ; marge-bas : 7px ; }
#Projet vedette a {couleur : #00aeef ; font-size : 14px ; text-decoration : none ; }
Encore une fois, la largeur de ce contenant est de 425px avec 45px de rembourrage gauche. La technique de remplacement d'image CSS est utilisée pour afficher le titre du "Projet en vedette" et le reste consiste simplement à définir les marges, les couleurs et les tailles de police des différents éléments.
Codage de la dernière section : Le footer
37 Le pied de page est très simple à coder. Ajoutez le HTML suivant à votre fichier index.html.
<div id="footer"> <div
<div class="horizontal-line" style="clear : both"></div>
<p>Copyright © ; 2010 ~ Design Studios ~ Tous droits réservés </p>>.
</div><!--end footer-->
Dans le pied de page, nous affichons juste une autre ligne horizontale pour servir de séparateur entre le conteneur #additional-info et le #footer. Un texte standard sur les droits d'auteur est alors inclus en dessous.
38 Ajoutez maintenant ce bloc de code CSS à votre fichier style.css pour styliser notre section footer.
/**--------------------------------FOOTER--------------------------------------*/
#footer { hauteur : 70px ; rembourrage : 0 0 0 30px 0 ; }
#footer p { font-size : 16px ; color : #888 ; rembourrage : 14px 0 0 0 0 0 ; }
Le style ici est assez simple : Nous définissons la hauteur du conteneur #footer, puis nous réglons le rembourrage inférieur à 30px pour donner une certaine marge de manœuvre au bas du gabarit de mise en page Web.
Nous définissons également la taille de la police et la couleur du texte du copyright et leur donnons un peu de remplissage en haut pour éloigner le texte de la ligne horizontale.
Metadosi converti vos fichiers PSD en HTML pour créer votre site web !
C'est tout ce qui est fait. Si tout s'est déroulé comme prévu, j'espère que vous en avez qui ressemblent à la capture d'écran suivante. Si vous désirez créer un site internet brillant à partir de vos fichiers PSD, Metadosi peut vous aider. Contactez-nous en ligne ou par téléphone au 06 80 60 77 77 pour savoir comment Metadosi peut vous aider dans la conversion PSD / HTML pour créer votre site internet.
Résultat final : Démonstration en direct
J'espère que vous avez trouvé ce tutoriel utile. Veuillez laisser quelques commentaires ci-dessous si vous avez des questions, des suggestions ou des commentaires.
Contenu connexe
Série "Clean Business Website" (site Web d'entreprise propre)
Partie 1 : Comment concevoir un site Web d'entreprise propre avec Photoshop
Partie 2 : Conversion PSD/HTML : Coder une conception de site Web professionnel
