PSD naar HTML5 conversie: een HTML5 Slider toe te voegen aan een webpagina - deel 1 (3 / 6 stap)

Stap 3: De kop

In het ontwerp hierboven, is het eerste wat dat we zien het logo. Dus het plaatsen van een logo moet onze eerste stap die het omzetten van het ontwerp in een HTML5-pagina. Hiervoor Maak een header-tag in het body-label, dan maken een div met een soort wrapper. Vervolgens met behulp van een afbeeldingscode het logo afbeelding pad wordt gedefinieerd en om er linking, gebruikt de anker-tag en verwijzen naar een willekeurige pagina van uw website, zoals wij hebben gekoppeld aan de introductiepagina, die een gemeenschappelijke praktijk.

Vervolgens, in de PSD-ontwerp, kan u zien dat er niet een contactpersoon is. aan de rechterkant van het logo. Dus, een nieuwe sectie tag en geven het een unieke klasse, dan introduceren van een span-tag, en plaatst de contactpersoon niet. en zowel de meetbereikgasresponsie en de sectie tags respectievelijk te sluiten.

De navigatiebalk

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

Hier hebben wij een deel van de header voor de navigatiebalk. Sinds de aanvang van HTML5, een navigatiebalk maken veel makkelijker geworden, zoals we nu de speciale nav-tag in plaats hebben. Dus met behulp van de nav-tag, maken een geordende lijst of UL-tag erin, en binnen de UL-tag, 7 lijst of LI-tags, en plaatst de menu-opties binnen hen. Daarnaast geven de eerste LI-tag een unieke klasse naam bijvoorbeeld 'actief', die zal kom mee handzaam in de css. Bovendien, vergeet niet om het toevoegen van een anker-tag voor elk menu-optie. Zoals u dat we een web URL in de code href hebt gedefinieerd zien kunt, in plaats daarvan hebben we gewoon gebruik maken van een hash-tag. Maar u kunt uw websites URL in een volgorde die weinig hash-tags vervangen.

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

De linker banner container is waar u zult plaatst u de tekst naast de afbeelding slider zoals aangegeven in de ontwerp-bestand. Dus daarvoor allereerst een sectie tag maken en geef het een id van banner_container. Breng een extra sectie-tag met een klasse van left_banner. Dit is het begin van onze links banner-container. Nu maken een H2-tag en plaats de kop erin. We moeten na de kop, plaatst u de tekst, dus daarvoor een nieuwe alineacode en plaatst u de tekst en sluiten van de tag. Nu sluit ook de tag van de sectie van de linker banner alleen.

De HTML5-schuifregelaar

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

HTML5 Slider is wat we wilden je wanhopig te leren. Als in het begin verteld ons zelfs u dat veel ontwikkelaars het moeilijk vinden om een HTML5-schuifregelaar, en beginnen met behulp van sommige pre-en-klare schuifregelaars.

Dus om een HTML5-schuifregelaar, een sectie label maken met een klasse van slider_container, samen met die twee meer sectie tags te maken en geef ze een klasse van slider en slide_content respectievelijk.

Nu om de beelden in de schuif te plaatsen, gebruiken de afbeeldingstag en geeft u het pad van de afbeelding in de bron-code. En ook de breedte en de hoogte van de afbeelding opgeven. Vervolgens maken van een nieuwe sectie code en geef het een klasse van text_line, en schrijf de juiste tekst en sluit dit, evenals de vorige sectie-tag met een klasse van slide_content nu.

Voor nu, hebben we één afbeelding met succes in onze HTML5 schuifregelaar geplaatst. Maar een schuifregelaar moet altijd ten minste twee of meer beelden te werken. Dus voor het plaatsen van de tweede afbeelding en de tekst, kopieer het ene en plak het. Verander nu de bron van de afbeelding en wijs het naar de tweede afbeelding, houden de breedte en de hoogte hetzelfde. Vervolgens vervangen de tekstregel (indien nodig) en sluit de respectievelijke codes samen met de tweede sectie tag. Dat is het, onze fundamentele HTML5 schuifregelaar is nu compleet, dus laten we vooruit en maken van de schuifregelaar.

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

< / afdeling >
< / afdeling >
< / div >
< / kop >

Zoals we met succes de schuifregelaar gemaakt hebben, moeten we nu de Websitebezoekers voorzien met de controllers, zodat ook de dia's naar hun believen kunnen wijzigen. Dus gewoon maken twee ankertags, een met een klasse van left_arrow, en de andere met een klasse van right_arrow, en sluit de beide de codes.

Ja weten we dat je bent vrij verrast te merken dat, waarom hebben we niet de plaats om het even wat tussen de ankertags. Maar maak je geen zorgen, zoals wij zullen passende beelden voor deze twee codes via CSS3 plaatsen. Dus gewoon wachten, horloge en praktijk. Nu onze koptekstsectie voltooid is zo dicht alle resterende tags behalve de lichaam en HTML-tags.