PSD till HTML5 konvertering: lägga till en HTML5 reglaget på en webbsida - Del1 (3 / 6 steg)

Steg 3: I huvudet

I design som anges ovan, är det första vi ser logotypen. Så att placera en logotyp bör vara vår första steg som konvertera design till en HTML5-sida. För detta, göra en header tag i body-taggen, sedan göra en div med en klass av wrapper. Sedan använda en bildtagg definiera logo image väg, och att göra det kopplas samman, använder ankartaggen och peka den till valfri webbsida på din webbplats, som vi har kopplat den till hemsidan, som är vanligt förekommande.

Nästa, i PSD design, kan du se att det inte finns en kontakt. på höger sida av logotypen. Så för det, göra en ny avsnitt tagg och ge den en unik klass, då införa en span-tagg, och placera kontakten inte. och nära både span och avsnitt Taggar respektive.

Navigeringsfältet

< 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 >

Vi har gjort navigeringen bar en del av huvudet. Sedan starten av HTML5 blivit att göra ett navigeringsfält mycket enklare, eftersom vi nu har dedikerade nav etiketten på plats. Så med hjälp av nav tag, göra en oordnad lista eller UL tagg inuti, och inuti taggen UL, göra 7 lista eller LI Taggar, och placera menyalternativen inuti dem. Dessutom ger den första taggen LI en unik klass namn dvs "aktiva", som kommer väl till pass i css. Dessutom Glöm inte att lägga till en fästpunkt för varje menyalternativ. Som ni ser vi inte har definierat någon webbadress i href-taggen, i stället har vi bara använda en hash tagg. Men du kan ersätta de lilla hash taggarna med dina webbplatser URL i en sekvens.

Vänster Banner behållare

< 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 >

Den vänstra banner behållaren är där du ska placera texten förutom bild reglaget som visas i filen design. Så för att, först och främst göra en avsnitt tagg och ge det ett id för banner_container. Sedan göra en ytterligare avsnitt tagg med en klass av left_banner. Detta är början på vår vänster banner behållare. Nu skapa en H2 tagg och placera rubriken inuti den. Efter rubriken måste vi placera texten, så för att göra en ny punkt tagg och placera texten och stänga taggen. Nu även stänga taggen avsnitt av vänster banner bara.

Skjutreglaget för HTML5

< 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 >

HTML5 Slider är vad vi ville lära dig desperat. Som i början berättat vi även att många utvecklare har svårt att göra en HTML5 reglaget, och börja använda några färdiga reglagen.

Så för att göra en HTML5 slider, skapa ett avsnitt tag med en klass av slider_container, tillsammans med att skapa två mer avsnitt Taggar och ge dem en klass av reglage och slide_content respektive.

Nu för att placera bilderna i reglaget, använda bildtaggen och bild sökväg i taggen källa. Och även ange bredden och höjden på bilden. Sedan göra en ny avsnitt tagg och ge det en klass av text_line, och skriva den lämpliga texten och stänga detta liksom föregående avsnitt taggen med en klass av slide_content nu.

För nu, har vi lagt en bild i vår HTML5 reglaget framgångsrikt. Men ett reglage ska alltid ha minst två eller fler bilder att arbeta. Så för att placera den andra bilden och dess text, bara kopiera först och klistra in den. Nu ändra bildkällan och peka den till den andra bilden, hålla bredden och höjden samma. Sedan ersätta textraden (vid behov) och stäng taggarna respektive tillsammans med andra avsnitt etiketten. Det är det, vår grundläggande HTML5 reglaget är nu komplett, så låt oss gå vidare och göra skjutreglaget.

< en href = "#" class = "left_arrow" >< /a >
< en href = "#" class = "right_arrow" >< /a >

< / avsnitt >
< / avsnitt >
< / div >
< / header >

Som vi har gjort reglaget framgångsrikt, måste vi nu ge besökare på webbplatsen med dess styrenheter så att de kan även ändra bilderna på sin vilja. Så det är bara göra två ankare Taggar, en med en klass av left_arrow, och den andra med en klass av right_arrow och stäng de båda taggarna.

ja vet vi att du är ganska förvånad över att märka att varför vi inte har plats något däremellan ankare Taggar. Men oroa dig inte, som vi kommer att placera lämpliga bilder för dessa två Taggar via CSS3. Så bara vänta, klocka och praxis. Nu våra huvudsektionen är klar så nära alla resten av taggarna utom taggarna html och kroppen.