Stap 2: De HTML-code
< html >
< head >
< meta charset = "utf-8" >
< titel > voorbeeldproject < / title >
< link href="Common/css/style.css" type = "text/css" rel = "stylesheet" / >
< link href="common/css/css3.css" type = "text/css" rel = "stylesheet" / >
< link 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 >
<!--[als IE 6] >< script type = "text/javascript" src="common/js/jq-png-min.js" >< / script ><! [endif]-->
<!--[als IE] >< script type = "text/javascript" src="common/js/ieh5fix.js" >< / script ><! [endif]-->
< / head >
<! —---lichaam sectie-einde--->
< body >
<! —---belangrijkste kop begint--->
< koptekst >
<!—-----------------------------------Logo---------------------------------->
< div class = "wrapper" >
< een href="home.html" id = "logo" >< img src="common/images/logo_3.png" alt = "#" >< /a >
< klasse afdeling = "num" >< span > (123) 456.7890 < / span >< / afdeling >
<! —---navigation Bar--->
< nav >
< ul >
< li class = "active" >< een href = "#" > < /a >< /li > home
< li >< een href = "#" > over met ons opnemen < /a >< /li >
< li >< een href = "#" > < /a >< /li > Nieuws
< li >< een href = "#" > contact met ons opnemen < /a >< /li >
< li >< een href = "#" > < /a >< /li > producten
< li >< een href = "#" > services < /a >< /li >
< li >< een href = "#" > < /a >< /li > getuigenissen
< /ul >
< / nav >
<! —---links Banner Container--->
< sectie id = "banner_container" >
< klasse afdeling = "left_banner" >
VOORBEELDPROJECT < h2 > < / h2 >
< p > Project tekenen & Banners heeft gediend de Buffalo gebied de afgelopen 14 jaar. Wij maken vrijwel alle soorten borden en spandoeken. Aangezien de meeste van onze borden zijn aangepaste gemaakt, bel, fax of email voor een exacte prijsopgave. < /p >
< / afdeling >
<!—-----------------------------Slider Container---------------------------->
< klasse afdeling = "slider_container" >
< klasse afdeling = "slider" >
< klasse afdeling = "slide_content" >
< img src="common/images/banner_img_1.jpg" width = "495" height = "303" alt = "#" >
< klasse afdeling = "text_line" > Project borden een lokale, regionale en nationale bron voor het teken, banner en vloot grafische behoeften van honderden klanten geweest! < / afdeling >
< / afdeling >
< klasse afdeling = "slide_content" >
< img src="common/images/banner_img_2.jpg" width = "495" height = "303" alt = "#" >
< klasse afdeling = "text_line" > Project borden een lokale, regionale en nationale bron voor het teken, banner en vloot grafische behoeften van honderden klanten geweest! < / afdeling >
< / afdeling >
< / afdeling >
<!—-----------------------------Slider Controls----------------------------->
< een href = "#" class = "left_arrow" >< /a >
< een href = "#" class = "right_arrow" >< /a >
< / afdeling >
< / afdeling >
< / div >
< / kop >
<! —---hoofdmacht Container--->
< div class = "wrapper" >
< sectie id = "body_container" >
< sectie id = "top_section" >
< h2 > Welkom bij < span > Project < / 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 >
< / afdeling >
<! —---beneden Container--->
< sectie id = "bottom_container" >
< klasse afdeling = "common_box" >
< h3 > Testimonials < / h3 >
< p klasse "laatste" = > "Lorem ipsum dolor sit amet, consectetur adipiscing elit. DUIS ullamcorper mollis diam in sagittis." < /p >
< een href = "#" class = "naam" >-Vijay Kumar < /a >
< / afdeling >
< klasse afdeling = "common_box tweede" >
< h3 > Contact & adres < / h3 >
< p > 1234 Nodia Road (boven in de hoek van de spoorweg-St.) M.G. nagar, Nodia 14007 < /p >
< ul klasse = "contact" >
< li >< span > telefoon: < / span > 123-456-7890 < /li >
< li >< span > Fax: < / span > 987-654-3210 < /li >
< li >< span > E-mail: < / span >< een href = "mailto:thesignguy
< /ul >
< / afdeling >
< / afdeling >
< / afdeling >
< / div >
<! —---footer navigatie--->
< voettekst >
< div class = "wrapper" >
< sectie id = "menu" >
< ul class = "footer_nav" >
< li class = "active" >< een href = "#" > < /a >< /li > home
< li >< een href = "#" > over met ons opnemen < /a >< /li >
< li >< een href = "#" > < /a >< /li > Nieuws
< li >< een href = "#" > contact met ons opnemen < /a >< /li >
< li >< een href = "#" > < /a >< /li > producten
< li >< een href = "#" > services < /a >< /li >
< li >< een href = "#" > < /a >< /li > getuigenissen
< /ul >
<! —---voettekst sociale pictogrammen--->
< ul class = "social_icon" >
< li >< een href = "#" class = "facebook" >< /a >< /li >
< li >< een href = "#" class = "google" >< /a >< /li >
< li klasse = "laatste" >< een href = "#" class = "twitter" >< /a >< /li >
< /ul >
< / afdeling >
<!—----------------------------The Footer End------------------------------->
< ul class = "bottom_nav" >
< li klasse = "eerste" > COPYRIGHT © < /li >
< li >< een href = "www.Projectsigns.com" > WWW.ProjectSIGNS.COM < /a >< /li >
< li klasse = "laatst" > Alle rechten voorbehouden < /li >
< /ul >
< / div >
< / voettekst >
< / body >
< / html >
Dit is de code van de PSD-ontwerp dat we hebben omgezet in een HTML5 webpage. En om u te laten het volledig begrijpen, zodat u kunt beginnen met het omzetten van PSD-bestanden in websites, we zullen uitleggen het regel voor regel.
