Étape 2: Le code HTML
< html >
< tête >
< meta charset = « utf-8 » >
< titre > exemple de projet < /title >
< lien href="Common/css/style.css" type = "text/css" rel = "stylesheet" / >
< lien href="common/css/css3.css" type = "text/css" rel = "stylesheet" / >
< lien href="Common/fontface/fontface.css" type = "text/css" rel = "stylesheet" / >
< script type = "text/javascript" src="common/js/jquery.js" >< / script >
< script type = "text/javascript" src="common/js/cycle.js" >< / script >
< script type = "text/javascript" src="common/js/index.js" >< / script >
<!--[si IE 6] >< script type = "text/javascript" src="common/js/jq-png-min.js" >< / script >< ! [endif]-->
<!--[si c’est à dire] >< script type = "text/javascript" src="common/js/ieh5fix.js" >< / script >< ! [endif]-->
< / head >
<! —---corps Section commence--->
< corps >
<! —---en-tête principal commence--->
< en-tête >
<!—-----------------------------------Logo---------------------------------->
< div class = « wrapper » >
< a href="home.html" id = "logo" >< img src="common/images/logo_3.png" alt = "#" >< / a >
< section classe = « num » >< span > (123) 456.7890 < /span >< / section >
<! —---navigation Bar--->
< 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 >
<! —---contenant de la bannière à gauche--->
< 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 >
<!—-----------------------------Slider Container---------------------------->
< 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 >
<!—-----------------------------Slider Controls----------------------------->
< a href = « # » class = « left_arrow » >< / a >
< a href = « # » class = « right_arrow » >< / a >
< / section >
< / section >
< / div >
< / en-tête >
<! —---corps conteneur--->
< div class = « wrapper » >
< id article = « body_container » >
< id article = « top_section » >
le projet < h2 > WELCOME TO < span > < / span >< / h2 >
< img src="common/images/van_img.jpg" alt = "#" class = "van_img" / >
< p > lorem libero nec risus. < /p >
< p > Nulla facilisi. < /p >
< img src="common/images/house_img.jpg" alt = "#" class = "house_img" / >
< p > lorem libero nec risus. < /p >
< p > Nulla facilisi. < /p >
< / section >
<! —---bas conteneur--->
< id article = « bottom_container » >
< section class = « common_box » >
Témoignages de < h3 > < / h3 >
< classe p = « dernière » > "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ullamcorper mollis diam dans sagittis. » < /p >
< a href = « # » class = « nom » >-Vijay Kumar < /a >
< / section >
< section class = "common_box deuxième" >
< h3 > Contact & adresse < / h3 >
< p > 1234 Nodia Road (près de l’angle du chemin de fer St.) M.G. nagar, Nodia 14007 < /p >
< ul class = « contact » >
< li >< span > Téléphone : < /span > 123-456-7890 < /li >
< li >< span > Fax : < /span > 987-654-3210 < /li >
< li >< span > Email : < /span >< a href = "mailto:thesignguy
< /ul >
< / section >
< / section >
< / section >
< / div >
<! —---footer Navigation--->
pied de page < >
< div class = « wrapper » >
< id article = « menu » >
< ul class = « footer_nav » >
< 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 >
<! —---icônes Social de pied de page--->
< ul class = « social_icon » >
< li >< a href = « # » class = « facebook » >< /a >< /li >
< li >< a href = « # » class = « google » >< /a >< /li >
< classe li = « dernière » >< a href = « # » class = « twitter » >< /a >< /li >
< /ul >
< / section >
<!—----------------------------The Footer End------------------------------->
< ul class = « bottom_nav » >
< classe li = « first » > COPYRIGHT © < /li >
< li >< a href = « www.Projectsigns.com » > WWW.ProjectSIGNS.COM < /a >< /li >
< classe li = « dernière » > tous droits réservés < /li >
< /ul >
< / div >
< / pied de page >
< / body >
< / html >
C’est le code du dessin ou modèle PSD nous avons transformé en une page Web HTML5. Et pour vous faire comprendre complètement afin que vous puissiez commencer à convertir les fichiers PSD dans les sites Web, nous vous expliquerons pas ligne par ligne.
