Le tutoriel d'aujourd'hui vous apprendra à utiliser Div + CSS pour couper la page PSD en pages HTML. Ce type de tutoriel a été fait très peu sur ce site, et la plupart d'entre eux sont relativement fragmentaires. À l'avenir, nous publierons lentement et traduireons davantage ce type de tutoriels.
Premièrement regarder l'effet
L'image ci-dessous est les rendus. Après l'avoir coupé, la tête et le fond peuvent être plus larges ...
Créer un nouveau dossier
Pour commencer, créez un dossier dans votre ordinateur. Je l'ai nommé Zmool. Créez ensuite de nouvelles images de dossiers dans le dossier et placez toutes les images du site Web. Ensuite, ouvrez l'éditeur de code (Dreamweaver) et créez un fichier html nommé index.html dans le répertoire racine, qui est notre modèle de page d'accueil. Créez maintenant un nouveau fichier CSS et nommez-le le fichier style.css. Comme indiqué dans la figure ci-dessous:
Ouvrez le fichier index.html. En haut de l'étiquette de tête, ajoutez le lien à votre feuille de style (style.css). Vous pouvez utiliser le code suivant.
<link href = style.css rel = sylesheet type = text / css />
Le code d'en-tête est le suivant:
<! 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> <adread> <meta http-equiv = content-type content = text / html; Charset = UTF-8 /> <Title> Modern Design Studio </ Title> <link href = style.css rel = Stylesheet Type = Text / CSS /> </ head> <body> </body> </html>
Créer une structure HTML
Maintenant, nous allons configurer la structure du fichier HTML. Définissez 3 sections (titre, contenu, pied de page) comme ci-dessous:
<! 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> <adread> <meta http-equiv = content-type content = text / html; Charset = UTF-8 /> <Title> Document Untitled </ Title> <Link Rel = Stylesheet Type = Text / CSS Href = Style.css /> </ Head> <Body> <div Id = Header> </ Div> <div Id = Content> </div> <div Id = Footer> </div> </body> </html>
Fond de coupe
Notre fichier PSD contient de nombreux effets de texture. Nous devons découper tous ces éléments, puis les ajouter à la page Web avec du code pour rendre l'effet de la page DIV cohérent avec l'effet de conception.
<body> <div id = en-tête> <div id = conteneur> </ div> </ div> <div id = contenu> <div id = Container> </ div> </div> <div id = footer> <div id = conteneur> </div> </div> </odyfing>
Ouvrez maintenant le calque initialement conçu dans Photoshop, cachez-le, à l'exception du calque d'arrière-plan.
Maintenant, prenez l'outil de tranchage, sélectionnez l'arrière-plan, enregistrez le format Web de la page Web (Alt + Shift + Ctrl + S). Ensuite, le fichier de dossier d'image enregistré est nommé fond.jpg.
Définir le style d'arrière-plan
Ouvrez le fichier style.css, définissez le style de base, le style d'arrière-plan et la largeur de la partie principale, comme suit:
* {margin: 0px; rembourrage: 0px;} body {background: url (images / background.jpg);} # conteneur {margin: auto; Largeur: 960px;}Couper la tête
Revenez à Photoshop, masquez le soi-disant calque, à l'exception de l'arrière-plan de la tête et utilisez la même méthode pour couper l'image d'arrière-plan de la tête au format Web et enregistrez le nom du fichier sous la tête.jpg.
Modifier le code d'arrière-plan de la tête
Modifiez le code suivant dans le fichier style.css:
#Header {Background: URL (images / en-tête.jpg); hauteur: 124px;}Coupez le logo Head
À l'heure actuelle, coupez la couche de logo et cachez toutes les couches, y compris la couche d'arrière-plan. Coupez la couche de logo comme la même méthode que ci-dessus pour l'enregistrer en tant que logo.png. Remarque: Enregistrez-le sous forme d'image de format PNG.
Ajouter pour ajouter le logo sur la page
Retournez maintenant à HTML et ajoutez le code suivant <div id = logo>…. </div> dans #Header #Container.
<div id = en-tête> <div id = conteneur> <div id = logo> <a href = #> <img src = images / logo.png> </a> </div> </div> </div>
Maintenant, passez au fichier style.css ci-dessous et écrivez le style #logo.
#Logo {margin-top: 20px; bordure: aucun;}Modifier le code de navigation
Vous trouverez ci-dessous le code de la page. L'en-tête comprend deux parties: logo et navigation.
<div id = en-tête> <div id = conteneur> <div id = logo> <a href = #> <img src = images / logo.png> </a> </div> <ul> <li> <a href = #> home </a> </li> <li> <a href = #> <li> <a href = #> blog </a> </li> <li> <a href = #> Contact </a> </li> </div> </div>
Le style de navigation est le suivant:
Maintenant, ajoutez les styles de navigation dans le tableau CSS ~, UL, Li et liez un styles:
#header li {couleur: # 959595; list-style: Aucun; float: gauche; marge-droite: 20px; font-famille: myriad pro, arial; font-weight: bold; font-size: 24px;} # header li a {couleur: # 959595; text-décoration: non; ul {float: à droite; margin-top: -40px;} # en-tête li a: hover {background: # 202020; couleur: # d2d2d2; -moz-border-radius: 5px; -khtml-border-radius: 5px; -webkit-border-radius: 5px;}Maintenant, faites la partie médiane
Maintenant, nous ajoutons deux divs à la partie médiane du contenu de la page, comme indiqué dans la figure ci-dessous:
<div id = contenu> <div id = Container> <div id = en vedette> </ div> <div id = paragraphes> </div> </div> </div>
Passez à la page PSD Photoshop, coupez la partie centrale et nommez-le en vedette.jpg. La figure suivante:
Ajoutez le code suivant à votre page HTML et une introduction de texte:
<div id = contenu> <div id = conteneur> <div id = en vedette> <a href = #> Plus de projets </a> <p> <pan> Projet de portfolio, 5 janvier 2010 </span> Avez-vous toujours voulu créer une conception de portefeuille propre et agréable? Dans ce tutoriel, je vais vous montrer comment concevoir la disposition du portefeuille bleu propre. Avez-vous déjà voulu créer une conception de portefeuille propre et agréable? Dans ce tutoriel, je vais vous montrer comment concevoir la disposition du portefeuille bleu propre dans Adobe Photoshop. </p> </div> <div id = paragraphes> </div> </div> </div>
Dans le fichier PSD, masquer d'autres couches dites, laisser uniquement la pièce de calque de bouton, couper la partie du bouton, enregistrer le format PNG et le nommer Button.png.
Maintenant, nous ajoutons ces images à la page, passons à la page du fichier CSS et ajoutons le code suivant, qui comprend le style d'arrière-plan et le style de bouton.
#Featered {Background: URL (images / electUred.jpg) sans répétition; hauteur: 381px; margin-top: 30px; margin-left: 80px;} # en vedette a {background: url (images / bouton.png); hauteur: 30px; largeur: 124px; text-indent: -9999px; position: absolu; margin-top: 330px; margin-left: 180px;} # en vedette a: hover {background-position: 0px 30px;}Ajoutons maintenant quelques styles de texte factice:
.DummyText {Color: # d2d2d2; largeur: 245px; marge-top: 150px; position: absolue; font-famille: Arial, Helvetica, Sans-Serif; Font-Size: 12px; Line-Height: 180%; marge-left: 290px;}. Span {Font-Size: 16px; Couleur: # 191919; Font-Weight: Bold;}Ce qui suit est ajouté pour ajouter des images pour afficher la section d'introduction de la catégorie suivante
La partie de code de la page est la suivante.
<div id = paragraphes> <p> <span> Beautiful </span> WebDesignFan est un blog lié à la conception sur la conception Web, Photoshop, Freebies et Tutorials. Nous publions des informations utiles dédiées aux concepteurs Web et aux développeurs. Ici, vous pouvez trouver des ressources gratuites comme des vecteurs, des thèmes WordPress et beaucoup d'inspiration. </p> <p> <span> efficace </span> WebDesignFan est un blog lié à la conception sur la conception Web, Photoshop, les cadeaux et les tutoriels. Nous publions des informations utiles dédiées aux concepteurs Web et aux développeurs. Ici, vous pouvez trouver des ressources gratuites comme des vecteurs, des thèmes WordPress et beaucoup d'inspiration. </p> <p> <span> fonctionnel </span> WebDesignFan est un blog lié à la conception sur la conception Web, Photoshop, les cadeaux et les tutoriels. Nous publions des informations utiles dédiées aux concepteurs Web et aux développeurs. Ici, vous pouvez trouver des ressources gratuites comme des vecteurs, des thèmes WordPress et beaucoup d'inspiration. </p> </div>
Le contenu de notre partie centrale devrait ressembler à ceci:
<div id = contenu> <div id = conteneur> <div id = en vedette> <a href = #> Plus de projets </a> <p> <pan> Projet de portfolio, 5 janvier 2010 </span> Avez-vous toujours voulu créer une conception de portefeuille propre et agréable? Dans ce tutoriel, je vais vous montrer comment concevoir la disposition du portefeuille bleu propre. Avez-vous déjà voulu créer une conception de portefeuille propre et agréable? Dans ce didacticiel, je vais vous montrer comment concevoir la disposition du portefeuille bleu propre dans Adobe Photoshop. </p> </div> <div id = paragraphes> <p> <span> Beautiful </span> webdesignfan est un blog lié à la conception sur la conception Web, Photoshop, Freebies and Tutorials. Nous publions des informations utiles dédiées aux concepteurs Web et aux développeurs. Ici, vous pouvez trouver des ressources gratuites comme des vecteurs, des thèmes WordPress et beaucoup d'inspiration. </p> <p> <span> efficace </span> WebDesignFan est un blog lié à la conception sur la conception Web, Photoshop, les cadeaux et les tutoriels. Nous publions des informations utiles dédiées aux concepteurs Web et aux développeurs. Ici, vous pouvez trouver des ressources gratuites comme des vecteurs, des thèmes WordPress et beaucoup d'inspiration. </p> <p> <span> fonctionnel </span> WebDesignFan est un blog lié à la conception sur la conception Web, Photoshop, les cadeaux et les tutoriels. Nous publions des informations utiles dédiées aux concepteurs Web et aux développeurs. Ici, vous pouvez trouver des ressources gratuites comme des vecteurs, des thèmes WordPress et beaucoup d'inspiration. </p> </div> </div> </div>
Accédez à votre fichier CSS et ajoutez le code suivant.
#Paragraphs Span {Font-Family: Myriad Pro, Helvetica, Sans-Serif; Font-Size: 22px; Font-Weight: 600; Lettre-espacement: -2px;} # paragraphes {margin-left: 80px; font-family: Arial, Helvetica, SANS-SERIF; Couleur: # 191919; Font-Size: 12px; margin-top: 15px;}. Paragraphe {largeur: 250px; margin-left: 15px; float: Left;}C'est ce que nous avons fait jusqu'à présent:
Le bas du site Web est géré ci-dessous
Maintenant que nous en avons terminé cette partie, nous commencerons à créer le pied de page.
Tout d'abord, dans votre fichier PSD, cachez d'autres couches à l'exception des couches de texture de pied de page et de pied de page, puis trancher et enregistrer le dossier de pied de page sous le nom de pied.jpg.
Ensuite, coupez-le à nouveau et coupez le bouton et les graphismes des oiseaux. Nommez-le suivant.png et Bird.jpg respectivement.
Modifier le code inférieur
Le pied de page inférieur comprend du texte et une image de l'oiseau avec un lien.
Ajoutez donc le code suivant à la page HTML.
<div id = footer> <div id = conteneur> <p> 2010? Studio de design fictionnel. Conception par webdesignfan. </p> <a href = #> Suivez-nous sur twitter </a> <img src = images / bird.jpg /> </div> </div>
Maintenant, modifiez le code de style de pied de page en bas comme suit:
#footer {background: url (images / footer.jpg); hauteur: 71px; margin-top: 191px;} # footer p {Font-Family: Arial, Helvetica, Sans-Serif; Font-Size: 12px; Color: # 959595; Position: absolu; margin-top: 30px;} # foi du pied a {background: url (images / suivi.png); text-indent: -9999px; position: absolu; hauteur: 27px; largeur: 124px; margin-left: 730px; margin-top: 30px;} # footter img {float: droite; margin-top: 10px;}Nous utilisons Footer.jpg comme arrière-plan du pied de page, puis ajoutant quelques styles de texte.
Pour le lien vers l'image de l'oiseau en bas, nous avons utilisé la même méthode avant, en utilisant l'effet flottant pour le positionner.
Effet final
Téléchargement de fichiers (0,7 Mo)
Même maintenant, c'est fini. Je ne sais pas si vous le comprenez. Si vous ne le comprenez pas, laissez un message. Si vous ne le comprenez pas, je vais l'ajouter et le modifier à nouveau, haha ~