PSD till HTML5 konvertering: lägga till en HTML5 reglaget på en webbsida - Del1 (2 / 6 steg)
Steg 2: HTML
< html >
< head >
< meta charset = "utf-8" >
< title >-exempelprojektet < / title >
< länka href="Common/css/style.css" type = "text/css" rel = "stylesheet" / >
< länka href="common/css/css3.css" type = "text/css" rel = "stylesheet" / >
< länka 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 >
<!--[om IE 6] >< script type = "text/javascript" src="common/js/jq-png-min.js" >< / script ><! [endif]-->
<!--[om dvs] >< script type = "text/javascript" src="common/js/ieh5fix.js" >< / script ><! [endif]-->
< / head >
<! —---kropp Avsnittsinledning--->
< body >
<! —---huvudsaklig titelrad startar--->
< header >
<!—-----------------------------------Logo---------------------------------->
< div class = "wrapper" >
< en href="home.html" id = "logotyp" >< img src="common/images/logo_3.png" alt = "#" >< /a >
< avsnitt klass = "num" >< span > (123) 456.7890 < / span >< / avsnitt >
<! —---navigation Bar--->
< nav >
< ul >
< li klass = "aktiv" >< en href = "#" > Hem/< a >< /li >
< li >< en href = "#" > om oss < /a >< /li >
< li >< en href = "#" > Nyheter/< a >< /li >
< li >< en href = "#" > Kontakta oss < /a >< /li >
< li >< en href = "#" > produkter < /a >< /li >
< li >< en href = "#" > tjänster < /a >< /li >
< li >< en href = "#" > testimonials < /a >< /li >
< /ul >
< / nav >
<! —---lämnade Banner Container--->
< avsnitt id = "banner_container" >
< avsnitt class = "left_banner" >
EXEMPELPROJEKT i < h2 > < / h2 >
< p > projektet skyltar & Banners har tjänstgjort Buffalo området under de senaste 14 åren. Vi gör nästan alla typer av skyltar och banderoller. Eftersom de flesta av våra skyltar är anpassade gjort, ring, fax eller e-post för en exakt offert. < /p >
< / avsnitt >
<! —---reglaget Container--->
< avsnitt class = "slider_container" >
< avsnitt klass = "skjutreglaget" >
< avsnitt class = "slide_content" >
< img src="common/images/banner_img_1.jpg" bredd = "495" höjd = "303" alt = "#" >
< avsnitt class = "text_line" > projektet tecken har varit en lokal, regional och nationell källa för tecken, banner och flotta grafiska behov av hundratals kunder! < / avsnitt >
< / avsnitt >
< avsnitt class = "slide_content" >
< img src="common/images/banner_img_2.jpg" bredd = "495" höjd = "303" alt = "#" >
< avsnitt class = "text_line" > projektet tecken har varit en lokal, regional och nationell källa för tecken, banner och flotta grafiska behov av hundratals kunder! < / avsnitt >
< / avsnitt >
< / avsnitt >
<!—-----------------------------Slider Controls----------------------------->
< en href = "#" class = "left_arrow" >< /a >
< en href = "#" class = "right_arrow" >< /a >
< / avsnitt >
< / avsnitt >
< / div >
< / header >
<! —---huvuddel Container--->
< div class = "wrapper" >
< avsnitt id = "body_container" >
< avsnitt id = "top_section" >
Välkommen till < span > < h2 > i projekt < / 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 >
< / avsnitt >
<! —---nedre behållaren--->
< avsnitt id = "bottom_container" >
< avsnitt class = "common_box" >
< h3 > Testimonials < / h3 >
< p class = "senast" > "Lorem ipsum dolor sit amet, consectetur adipiscing elit. DUIs ullamcorper mollis diam i sagittis." < /p >
< en href = "#" class = "namn" >-Vijay Kumar < /a >
< / avsnitt >
< avsnitt class = "common_box andra" >
< h3 > kontakt & adress < / h3 >
< p > 1234 Nodia Road (nära hörnet av järnvägen St.) M.G. nagar, Nodia 14007 < /p >
< ul klass = "kontakta" >
< li >< span > telefon: < / span > 123-456-7890 < /li >
< li >< span > Fax: < / span > 987-654-3210 < /li >
< li >< span > e-post: < / span >< en href = "mailto:thesignguy
< /ul >
< / avsnitt >
< / avsnitt >
< / avsnitt >
< / div >
<! —---sidfot Navigering--->
< sidfot >
< div class = "wrapper" >
< avsnitt id = "meny" >
< ul class = "footer_nav" >
< li klass = "aktiv" >< en href = "#" > Hem/< a >< /li >
< li >< en href = "#" > om oss < /a >< /li >
< li >< en href = "#" > Nyheter/< a >< /li >
< li >< en href = "#" > Kontakta oss < /a >< /li >
< li >< en href = "#" > produkter < /a >< /li >
< li >< en href = "#" > tjänster < /a >< /li >
< li >< en href = "#" > testimonials < /a >< /li >
< /ul >
<! —---sidfot sociala ikoner--->
< ul class = "social_icon" >
< li >< en href = "#" class = "facebook" >< /a >< /li >
< li >< en href = "#" class = "google" >< /a >< /li >
< li klass = "senast" >< en href = "#" class = "twitter" >< /a >< /li >
< /ul >
< / avsnitt >
<!—----------------------------The Footer End------------------------------->
< ul class = "bottom_nav" >
< li klass = "första" > COPYRIGHT © < /li >
< li >< en href = "www.Projectsigns.com" > WWW.ProjectSIGNS.COM < /a >< /li >
< li klass = "senast" > alla rättigheter reserverade < /li >
< /ul >
< / div >
< / sidfot >
< / body >
< / html >
Detta är koden för PSD design som vi har konverterat i en HTML5 webbsida. Och för att du ska förstå det helt så att du kan börja konvertera PSD-filer i webbplatser, kommer vi att förklara det rad för rad.