PSD à la Conversion de HTML5 : ajout d’un curseur de HTML5 vers une page Web - partie 1 (3 / 5 étapes)

Étape 3: L’en-tête

Dans le dessin ci-dessus, la première chose que nous voyons est le logo. Donc placer un logo devrait être notre première étape qui convertir le dessin dans une page HTML5. Pour ce faire, faites une balise d’en-tête à l’intérieur de la balise body, puis faire un div avec une classe de wrapper. Puis à l’aide d’une balise d’image définir le chemin d’accès de l’image logo et de le rendre linkable, utilisez la balise d’ancrage et pointer vers n’importe quelle page de votre site Web, que nous avons lié à la page d’accueil, qui est une pratique courante.

Ensuite, dans la conception de la PSD, vous pouvez voir qu’il n’y a un contact non. sur le côté droit du logo. Donc pour elle, faire une nouvelle balise de la section et lui donner une classe unique, puis introduire une balise span et placer le contact pas. et fermer les balises span et de section respectivement.

La barre de Navigation

< nav >
< ul >
< classe li = « actif » >< a href = « # » > Accueil < /a >< /li >
< li >< a href = « # » > qui sommes-nous < /a >< /li >
< li >< a href = « # » > Actualités < /a >< /li >
< li >< a href = « # » > Contactez-nous < /a >< /li >
< li >< a href = « # » > produits < /a >< /li >
< li >< a href = « # » > services < /a >< /li >
< li >< a href = « # » > témoignages < /a >< /li >
< /ul >
< / nav >

Nous avons fait la barre une partie de l’en-tête de navigation. Depuis la création du HTML5, faire une barre de navigation est devenu beaucoup plus facile, car nous avons maintenant la balise dédiée nav en place. Donc, en utilisant la balise de nav, faire une liste non ordonnée ou la balise UL à l’intérieur et à l’intérieur de la balise UL, que les balises de liste ou LI 7 et placer les options de menu à l’intérieur d’eux. En outre, donner la première balise LI un unique nom de classe par exemple, « active », qui viendra maniable dans le css. En outre, n’oubliez pas d’ajouter une balise d’ancrage pour chaque option du menu. Comme vous pouvez le voir que nous n’avons pas défini une URL web dans la balise href, au lieu de cela nous avons il suffit d’utiliser une balise de hachage. Mais vous pouvez remplacer ces balises peu de hachage avec URL de vos sites Web dans une séquence.

Bannière gauche conteneur

< id article = « banner_container » >
< section class = « left_banner » >
PROJET exemple < h2 > < / h2 >
< p > projet signes & bannières a servi la région de Buffalo pendant les 14 dernières années. Nous faisons pratiquement tous les types d’enseignes et bannières.  Puisque la plupart de nos panneaux est fabriqués sur mesure, s’il vous plaît appelez, fax ou email pour un devis exact. < /p >
< / section >

Le conteneur de la bannière gauche est où vous allez placer le texte sans compter que le curseur de l’image comme indiqué dans le fichier de conception. Donc pour que, tout d’abord faire une étiquette de section et attribuez-lui un id de banner_container. Ensuite, faire une balise de section supplémentaire avec une classe de left_banner. C’est le début de notre container bannière gauche. Maintenant, créez une balise H2 et placer la rubrique à l’intérieur. Après le titre, nous devons placer le texte, donc pour cela faire une nouvelle balise de paragraphe, placez le texte et fermer la balise. Maintenant aussi fermer la balise de la section de la bannière de gauche seulement.

Le curseur de HTML5

< section class = « slider_container » >
< section classe = « slider » >
< section class = « slide_content » >
< img src="common/images/banner_img_1.jpg" width = "495" height = "303" alt = "#" >
< section class = « text_line » > panneaux de projet a été une source locale, régionale et nationale pour les besoins graphiques signe, bannière et flotte de centaines de clients ! < / section >
< / section >
< section class = « slide_content » >
< img src="common/images/banner_img_2.jpg" width = "495" height = "303" alt = "#" >
< section class = « text_line » > panneaux de projet a été une source locale, régionale et nationale pour les besoins graphiques signe, bannière et flotte de centaines de clients ! < / section >
< / section >
< / section >

Curseur de HTML5 est ce que nous voulions vous enseigner désespérément. Comme au début nous même vous dit que beaucoup de développeurs éprouvent des difficultés à faire un curseur d’HTML5 et commencer à utiliser certains curseurs pré-faites.

Donc pour faire un curseur d’HTML5, créez une balise de section avec une classe de slider_container, ainsi que celle créer deux balises de section plus et leur donner une classe de curseur et slide_content respectivement.

Maintenant pour placer les images dans le curseur, utilisez la balise image et indiquez le chemin de l’image dans la balise source. Et de spécifier la largeur et la hauteur de l’image. Faites une nouvelle balise de la section et lui donner une classe de text_line et écrire le texte approprié et fermer ce problème ainsi que la balise de la section précédente avec une classe de slide_content maintenant.

Maintenant nous rendre le récipient bas pour placer le témoignage et adresse de contact. Ainsi, créer une nouvelle balise de la section et lui donner une classe de conteneur de fond. Faites une autre balise de la section avec une classe de common_box et placer l’en-tête de colonne de l’attestation à l’intérieur d’une balise H3. Maintenant à l’aide de la balise de paragraphe, placez le texte testimonial dedans et n’oubliez pas de donner cette balise de paragraphe, une classe de dernière. Maintenant pour le nom de l’expéditeur testimoniale, faire une balise d’ancrage avec une classe du nom, inscrire le nom de l’expéditeur à l’intérieur et fermer la balise de la section pour compléter la colonne testimoniale.

Maintenant pour l’adresse de contact, faire une nouvelle balise de section avec une classe de common_box_second. Puis placer la rubrique c'est-à-dire « Contact & adresse » à l’intérieur d’une balise H3 et à l’aide de la balise de paragraphe, placez l’adresse complète avec code postal. Et comme vous pouvez le voir dans le fichier PSD, il faut placer le téléphone, Fax et Email, nous allons faire maintenant.

Faire un tag de liste non ordonnée avec une classe de contact. À l’intérieur de cette balise ul, faire trois balises de liste ou li et place le téléphone, Fax et Email dans la même séquence. Mais comme vous l’avez peut-être déjà remarqué, leur texte de titre est dans la couleur noire, donc ajouter une balise span dans chaque balise li et terminez-la juste après le titre.

En outre, dans la section courrier électronique, l’adresse e-mail doit par un lien hypertexte avec un lien mailto action donc faire cela à l’aide de la balise d’ancrage et fermer la liste non ordonnée, trois balises de section et la balise div.