PSD zu HTML5 Conversion: Hinzufügen eines HTML5 Slider auf eine Webseite - Teil 1

6 Schritt:Schritt 1: Der PSD Entwurf Schritt 2: Die HTML- Schritt 3: Der Kopfball Schritt 4: Der Hauptkörper Container Schritt 5: Der Footer Schritt 6: Fertig!

PSD zu HTML5 Conversion: Hinzufügen eines HTML5 Slider auf eine Webseite - Teil 1
Es ist mehr als ein Jahr her, HTML5 seinen Weg in die Web-Industrie. Aber immer noch viele Menschen, in der Regel auch die Anfänger und die Mittelstufe, fällt es schwer, einen HTML5 Slider für eine Webseite zu machen. So mit diesem PSD zu HTML5 Conversion Tutorial, werden wir Sie beschreiben, wie ein Photoshop-basierten Web-Design in ein HTML5 Webseite, und wie man eine HTML5 Slider in es hinzuzufügen konvertieren.

Doch bevor die Zukunft, übernehmen wir Sie über Grundkenntnisse über HTML5 & CSS3, und unter Berücksichtigung der gleichen werden wir beginnen, um den Code in Detail aus dem Körperabschnitt, den wir in drei Teile, die den Header aufgeteilt zu erarbeiten, Hauptteil haben Behälter, Zeugnis und Kontaktbehälter. Aber wenn Sie möchten, um durch die HTML5 noch einmal zu gehen, können Sie es auf die Praxis W3Schools .

Darüber hinaus haben wir auch davon aus, dass Sie wissen, wie Sie die Ordnerstruktur, um alle Ihre Web-Seite die zugehörigen Dateien in den entsprechenden Ordner zu retten. Aber aus irgendeinem Grund Sie möchten, um es wieder zu verstehen, können Sie heraus dieses Tutorials zu überprüfen PSD zu HTML5 Conversion .

" Laden Sie diese PSD zu HTML5 Conversion Tutorial Files hier "Schritt 1: Die PSD Design-



PSD zu HTML5 Conversion: Hinzufügen eines HTML5 Slider auf eine Webseite - Teil 1
Das ist unser PSD-Design, die wir Konvertierung werden in ein HTML5 Web-Seite heute. Für diesen Entwurf werden wir sie ein HTML5 Slider, dass viele Anfänger und Fortgeschrittene findet schwer Code.

Nun wollen wir mit unseren Code zu beginnen!

Schritt 2: Die HTML-

PSD zu HTML5 Conversion: Hinzufügen eines HTML5 Slider auf eine Webseite - Teil 1
<! DOCTYPE html>
<Html>
<Head>
<Meta charset = "UTF-8">
<Title> Beispielprojekt </ 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>
<! - [If IE 6]> <script type = "text / javascript" src = "common / js / jq-png-min.js"> </ script> <[endif] ->
<! - [If IE]> <script type = "text / javascript" src = "common / js / ieh5fix.js"> </ script> <[endif] ->
</ Head>
<! ----------------------------Teil Startet ------------------ ---------->
<Body>
<! --------------------------- Hob Starts ------------------ ----------->

<Header>

<! ------------------------------------ Logo ----------- ----------------------->

<Div class = "Wrapper">
<a href="home.html" id="logo"> <img src = "common / images / logo_3.png" alt = "#"> </a>
<Section class = "num"> <span> (123) 456.7890 </ span> </ section>

<! ------------------------------- Navigation Bar --------------- -------------->

<Nav>
<Ul>
<Li class = "aktiv"> <a href="#"> Hause </a> </ li>
<Li> <a href="#"> über uns </a> </ li>
<Li> <a href="#"> Nachrichten </a> </ li>
<Li> <a href="#"> kontaktieren Sie uns </a> </ li>
<Li> <a href="#"> Produkte </a> </ li>
<Li> <a href="#"> Dienstleistungen </a> </ li>
<Li> <a href="#"> Zeugnisse </a> </ li>
</ Ul>
</ Nav>

<! ---------------------------- Left Banner Container ----------------- -------->

<Section id = "banner_container">
<Section class = "left_banner">
<H2> SAMPLE PROJECT </ h2>
<P> Projekt Signs & Banner hat die Buffalo Bereich für die letzten 14 Jahre gedient. Wir machen praktisch alle Arten von Schildern und Bannern. Da die meisten unserer Anzeichen sind kundenspezifisch, rufen Sie bitte, per Fax oder E-Mail für ein detailliertes Angebot. </ P>
</ Section>

<! ------------------------------ Slider Container ---------------- ------------>

<Section class = "slider_container">
<Section class = "Schieberegler">
<Section class = "slide_content">
<Img src = "common / images / banner_img_1.jpg" width = "495" height = "303" alt = "#">
<Section class = "TEXT_LINE"> Projekt Signs ist eine lokale, regionale und nationale Quelle für die Zeichen, Banner und Flotten grafischen Bedarf von Hunderten von Kunden! </ Section>
</ Section>
<Section class = "slide_content">
<Img src = "common / images / banner_img_2.jpg" width = "495" height = "303" alt = "#">
<Section class = "TEXT_LINE"> Projekt Signs ist eine lokale, regionale und nationale Quelle für die Zeichen, Banner und Flotten grafischen Bedarf von Hunderten von Kunden! </ Section>
</ Section>
</ Section>
<! ------------------------------ Slider Steuert ---------------- ------------->

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

</ Section>
</ Section>
</ Div>
</ Header>

<! ----------------------------- Hauptteil Container ---------------- ---------->

<Div class = "Wrapper">
<Section id = "body_container">
<Section id = "top_section">
<H2> WELCOME TO <span> Projekt </ span> </ h2>
<Img src = "common / images / van_img.jpg" alt = "#" class = "van_img" />
<P> lorem libero ang risus. </ P>
<P> Nulla facilisi. </ P>
<Img src = "common / images / house_img.jpg" alt = "#" class = "house_img" />
<P> lorem libero ang risus. </ P>
<P> Nulla facilisi. </ P>
</ Section>
<! ---------------------- Bottom Container -------------------->

<Section id = "bottom_container">
<Section class = "common_box">
<H3> Testimonials </ h3>
<P class = "letzte"> "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ullamcorper mollis diam in sagittis. "</ P>
<a href="#" class="name"> -Vijay Kumar </a>
</ Section>
<Section class = "common_box zweiten">
<H3> Kontakt & Adresse </ h3>
<P> 1234 Nodia Road (in der Nähe der Ecke der Eisenbahn St.) MG Nagar, Nodia 14007 </ p>
<Ul class = "Kontakt">
<Li> <span> Telefon: </ span> 123-456-7890 </ li>
<Li> <span> Fax: </ span> 987-654-3210 </ li>
<Li> <span> E-Mail: </ span> <a href = "mailto: [email protected] "> [email protected] </a> </ li>
</ Ul>
</ Section>
</ Section>

</ Section>
</ Div>

<! ----------------------------- Footer Navigation ----------------- ----------->

<Footer>
<Div class = "Wrapper">
<Section id = "Menü">
<Ul class = "footer_nav">
<Li class = "aktiv"> <a href="#"> Hause </a> </ li>
<Li> <a href="#"> über uns </a> </ li>
<Li> <a href="#"> Nachrichten </a> </ li>
<Li> <a href="#"> kontaktieren Sie uns </a> </ li>
<Li> <a href="#"> Produkte </a> </ li>
<Li> <a href="#"> Dienstleistungen </a> </ li>
<Li> <a href="#"> Zeugnisse </a> </ li>
</ Ul>

<! ---------------------------- Footer Social Icons ----------------- ---------->

<Ul class = "social_icon">
<Li> <a href="#" class="facebook"> </a> </ li>
<Li> <a href="#" class="google"> </a> </ li>
<Li class = "letzte"> <a href="#" class="twitter"> </a> </ li>
</ Ul>
</ Section>
<! ----------------------------- Der Footer End ---------------- --------------->

<Ul class = "bottom_nav">
<Li class = "erste"> Copyright © </ li>
<Li> <a href="www.Projectsigns.com"> WWW.ProjectSIGNS.COM </a> </ li>
<Li class = "letzte"> alle Rechte vorbehalten </ li>
</ Ul>

</ Div>
</ Footer>

</ Body>
</ Html>

Dies ist der Code der PSD-Design, die wir in einem HTML5 Webseite umgewandelt. Und damit Sie es verstehen völlig, so dass Sie beim Konvertieren von PSD-Dateien in Webseiten, werden wir diese Linie zu erklären durch line.Step 3: In der Kopfzeile

PSD zu HTML5 Conversion: Hinzufügen eines HTML5 Slider auf eine Webseite - Teil 1
<Body>
<Header>
<Div class = "Wrapper">
<a href="home.html" id="logo"> <img src = "common / images / logo_3.png" alt = "#"> </a>
<Section class = "num"> <span> (123) 456.7890 </ span> </ section>

Bei der Gestaltung oben vorgesehen ist, das erste, was wir sehen, ist das Logo. So platzieren Sie ein Logo sollte unser erster Schritt, der in eine HTML5 Seite Umwandlung der Bauart sein. Dafür machen eine Header-Tag innerhalb des Body-Tag, dann machen Sie einen div mit der Klasse-Wrapper. Dann mit einem Image-Tag definieren die Logo-Bild Pfad und, um es verknüpfbar, verwenden Sie den Anker-Tag und verweisen Sie auf jeder Seite Ihrer Website, wie wir es auf der Homepage, die eine gängige Praxis ist verknüpft haben.

Als nächstes wird in der PSD-Design, können Sie sehen, dass es einen Kontakt Nr. auf der rechten Seite des Logos. Also für sie, stellen Sie einen neuen Abschnitt-Tag und geben ihm eine einzigartige Klasse, dann führen ein span-Tag, und platzieren Sie den Kontakt Nr. und in der Nähe sowohl Spannweite und Abschnitt Tags auf.

Die Navigationsleiste

<Nav>
<Ul>
<Li class = "aktiv"> <a href="#"> Hause </a> </ li>
<Li> <a href="#"> über uns </a> </ li>
<Li> <a href="#"> Nachrichten </a> </ li>
<Li> <a href="#"> kontaktieren Sie uns </a> </ li>
<Li> <a href="#"> Produkte </a> </ li>
<Li> <a href="#"> Dienstleistungen </a> </ li>
<Li> <a href="#"> Zeugnisse </a> </ li>
</ Ul>
</ Nav>

Wir haben die Navigationsleiste ein Teil der Kopfzeile aus. Seit der Einführung von HTML5, so dass eine Navigationsleiste hat sich viel einfacher, als wir jetzt haben die dedizierte nav-Tag statt. So mit dem nav-Tag, stellen Sie eine ungeordnete Liste oder UL-Tag in seinem Inneren und in der UL-Tag, machen 7 Liste oder LI-Tags, und legen Sie die Menüoptionen in ihnen. Darüber hinaus geben die ersten LI-Tag einen eindeutigen Klassennamen dh "aktiv", die in der css kommen praktisch wird. Darüber hinaus vergessen Sie nicht, ein Anker-Tag für jede Menüoption hinzufügen. Wie Sie sehen, haben wir keine Web-URL in das href-Tag definiert, stattdessen haben wir nur mit einem Hash-Tag. Aber man kann die kleinen Hash-Tags mit URL Ihrer Websites "in einer Sequenz zu ersetzen.

Left Banner Container

<Section id = "banner_container">
<Section class = "left_banner">
<H2> SAMPLE PROJECT </ h2>
<P> Projekt Signs & Banner hat die Buffalo Bereich für die letzten 14 Jahre gedient. Wir machen praktisch alle Arten von Schildern und Bannern. Da die meisten unserer Anzeichen sind kundenspezifisch, rufen Sie bitte, per Fax oder E-Mail für ein detailliertes Angebot. </ P>
</ Section>

Die linke banner Behälter ist, wo Sie den Text neben dem Bild Schieberegler legen Sie wie in der Zeichnungsdatei angezeigt. So dass für zunächst einen Abschnitt-Tag und geben Sie ihm die ID banner_container. Dann machen Sie einen weiteren Abschnitt-Tag mit einer Klasse von left_banner. Dies ist der Anfang unserer linken banner Behälter. Erstellen Sie nun eine H2-Tag und legen Sie die Überschrift in seinem Inneren. Nach dem Motto, wir brauchen, um den Text zu platzieren, so dass für einen neuen Absatz-Tag zu machen und setzen Sie den Text und schließen Sie den Tag. Jetzt auch in der Nähe der Rubrik tag der nur links Banner.

Die HTML5-Slider

<Section class = "slider_container">
<Section class = "Schieberegler">
<Section class = "slide_content">
<Img src = "common / images / banner_img_1.jpg" width = "495" height = "303" alt = "#">
<Section class = "TEXT_LINE"> Projekt Signs ist eine lokale, regionale und nationale Quelle für die Zeichen, Banner und Flotten grafischen Bedarf von Hunderten von Kunden! </ Section>
</ Section>
<Section class = "slide_content">
<Img src = "common / images / banner_img_2.jpg" width = "495" height = "303" alt = "#">
<Section class = "TEXT_LINE"> Projekt Signs ist eine lokale, regionale und nationale Quelle für die Zeichen, Banner und Flotten grafischen Bedarf von Hunderten von Kunden! </ Section>
</ Section>
</ Section>

HTML5 Slider ist, was wir Ihnen dringend zu lehren wollten. Wie eingangs wir sogar gesagt, dass viele Entwickler finden es schwierig, eine HTML5 Schieberegler stellen, und starten Sie mit einigen vorgefertigten Schieberegler.

So, um eine HTML5 Schieberegler machen, erstellen Sie einen Abschnitt-Tag mit einer Klasse von slider_container, zusammen mit, dass zu schaffen zwei weitere Kapitel-Tags und geben ihnen eine Klasse der Schieberegler und slide_content sind.

Nun, um die Bilder in dem Schieber zu platzieren, verwenden Sie das Image-Tag und geben Sie die Image-Pfad in der Quelle-Tag. Und die Breite und Höhe des Bildes angeben. Dann machen Sie einen neuen Abschnitt-Tag und geben ihm eine Klasse von TEXT_LINE, und schreiben Sie den entsprechenden Text ein und schließen das so gut wie im vorherigen Abschnitt-Tag mit einer Klasse von slide_content jetzt.

Im Moment haben wir ein Bild in unserer HTML5 Schieber erfolgreich platziert wurden. Aber ein Schieberegler sollte immer mindestens zwei oder mehr Bilder zu arbeiten. So für die Platzierung des zweiten Bildes und dessen Text, kopieren Sie einfach die erste und fügen Sie ihn. Ändern Sie nun die Bildquelle und verweisen Sie auf dem zweiten Bild, halten Sie die Breite und die Höhe derselben. Dann ersetzen Sie die Textzeile (falls erforderlich), und schließen Sie die entsprechenden Tags zusammen mit dem zweiten Abschnitt-Tag. Das ist es, unsere Grund HTML5 Schieberegler ist nun abgeschlossen, also lasst uns voranzukommen, und stellen Sie den Schieberegler.

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

</ Section>
</ Section>
</ Div>
</ Header>

Wie wir den Regler erfolgreich gemacht, jetzt müssen wir die Website-Besucher mit seinem Controller bieten, so dass sie die Folien auch bei ihren Willen zu ändern. So stellen Sie einfach zwei Anker-Tags, eines mit einer Klasse von LEFT_ARROW, und das andere mit einer Klasse von Pfeiltaste_rechts, und schließen Sie die sowohl die Tags.

Ja, wir wissen, dass Sie sehr überrascht zu bemerken, dass, warum wir haben nichts in-zwischen den Anker-Tags sind. Aber keine Sorge, wir werden entsprechende Bilder für diese beiden Variablen über CSS3 zu platzieren. So einfach warten, Uhr und Praxis. Jetzt ist unser Header-Bereich ist komplett so schließen Sie alle verbleibenden Variablen mit Ausnahme der html und Körper tags.Step 4: Das Hauptkörperbehälter

PSD zu HTML5 Conversion: Hinzufügen eines HTML5 Slider auf eine Webseite - Teil 1
<Div class = "Wrapper">
<Section id = "body_container">
<Section id = "top_section">
<H2> WELCOME TO <span> Projekt </ span> </ h2>
<Img src = "common / images / van_img.jpg" alt = "#" class = "van_img" />
<P> lorem libero ang risus. </ P>
<P> Nulla facilisi. </ P>
<Img src = "common / images / house_img.jpg" alt = "#" class = "house_img" />
<P> lorem libero ang risus. </ P>
<P> Nulla facilisi. </ P>
</ Section>

Bis jetzt haben wir das Logo nicht gesetzt, den Kontakt. an der Spitze, in der Navigationsleiste der Text Behälter, und der Schieber. Jetzt ist es Zeit, um den Hauptkörperbehälter, wo wir die Überschrift, zwei Bilder, und die entsprechende Text Ort zu machen. Also, stellen Sie eine neue div mit der Klasse-Wrapper, dann machen zwei Abschnitt-Tags, eine mit der ID body_container, und die zweite mit der ID top_section.

Nun sollte man eine H2-Tag und legen Sie die Überschrift in seinem Inneren. Dann unter Verwendung der Image-Tag erinnern, das erste Bild für den oberen Bereich. Für Bildreferenz, überprüfen Sie die Designdatei. Wie Sie bei der Gestaltung sehen können, dass der Text in zwei Absätze platziert, so stellen zwei neue Absatz-Tags und legen Sie die entsprechenden Inhalte in beide.

Jetzt kopieren Sie diesen Schritt, um das zweite Bild und seine Text platzieren können. Vergessen Sie nicht, um das Bild Pfad und Text mit dem entsprechenden Bild und Absatztext zu ersetzen, und schließen Sie den Tag-Abschnitt.

Behälterunter

<Section id = "bottom_container">
<Section class = "common_box">
<H3> Testimonials </ h3>
<P class = "letzte"> "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ullamcorper mollis diam in sagittis. "</ P>
<a href="#" class="name"> -Vijay Kumar </a>
</ Section>
<Section class = "common_box zweiten">
<H3> Kontakt & Adresse </ h3>
<P> 1234 Nodia Road (in der Nähe der Ecke der Eisenbahn St.) MG Nagar, Nodia 14007 </ p>
<Ul class = "Kontakt">
<Li> <span> Telefon: </ span> 123-456-7890 </ li>
<Li> <span> Fax: </ span> 987-654-3210 </ li>
<Li> <span> E-Mail: </ span> <a href = "mailto: [email protected] "> [email protected] </a> </ li>
</ Ul>
</ Section>
</ Section>

</ Section>
</ Div>

Wir werden nun die unteren Behälter zu machen für das Inverkehrbringen des Testimonial und Kontaktadresse. So erstellen Sie einen neuen Abschnitt-Tag und geben ihm eine Klasse der unteren Behälter. Dann machen Sie einen weiteren Abschnitt-Tag mit einer Klasse von common_box, und legen Sie die Spaltenüberschrift für die Bewertung der im Inneren eines H3-Tag. Jetzt mit der Absatz-Tag, setzen Sie den Text in das Zeugnis, und vergessen Sie nicht, das Absatz-Tag eine Klasse von zuletzt geben. Jetzt für den Testimonial Absendername, geben Sie ein Anker-Tag mit einer Klasse von Namen, und legen Sie den Namen des Absenders in ihm, und schließen Sie den Tag, um die Abschnitt Testimonial Spalte abzuschließen.

Jetzt Kontaktadresse, stellen einen neuen Abschnitt-Tag mit einer Klasse von common_box_second. Dann legen Sie die Überschrift dh "Kontakt & Adresse" innerhalb einer H3-Tag, und mit dem Absatz-Tag, setzen Sie die gesamte Adresse mit Postleitzahl. Und wie Sie in der PSD-Datei sehen können, müssen wir auch die Telefon- und Faxnummer sowie E-Mail platzieren, so machen wir das jetzt.

Stellen Sie eine ungeordnete Liste-Tag mit einer Klasse von Kontakt. Innerhalb dieses ul-Tag, stellen drei Liste oder li-Tags, und legen Sie das Telefon, Fax, E-Mail und in der gleichen Reihenfolge. Aber wie Sie vielleicht schon bemerkt haben, ist ihre Überschriftentext in der schwarzen Farbe, so fügen Sie ein span-Tag in jedem li-Tag und lassen Sie ihn gleich nach der Überschrift.

Zusätzlich wird in der E-Mail-Abschnitt, die E-Mail-Adresse sollte mit einem mailto Aktion Hyperlink so zu tun, dass mit dem Anker-Tag, und schließen Sie die ungeordnete Liste, drei Abschnitt-Tags und die div tag.Step 5: Die Fußzeile

PSD zu HTML5 Conversion: Hinzufügen eines HTML5 Slider auf eine Webseite - Teil 1
<Footer>
<Div class = "Wrapper">
<Section id = "Menü">
<Ul class = "footer_nav">
<Li class = "aktiv"> <a href="#"> Hause </a> </ li>
<Li> <a href="#"> über uns </a> </ li>
<Li> <a href="#"> Nachrichten </a> </ li>
<Li> <a href="#"> kontaktieren Sie uns </a> </ li>
<Li> <a href="#"> Produkte </a> </ li>
<Li> <a href="#"> Dienstleistungen </a> </ li>
<Li> <a href="#"> Zeugnisse </a> </ li>

Schließlich haben wir in der Nähe des Endes des HTML kommen, und man kann nun die Fußzeilencode. Um die Fußzeile zu machen, erstellen Sie eine footer-Tag, und im Inneren, einen div-Tag mit einer Klasse-Wrapper. Dann machen Sie einen Abschnitt-Tag mit der ID-Menü, wie wir brauchen, um eine Navigationsleiste in der Fußzeile zu machen.

Erstellen Sie nun eine ungeordnete Liste mit einer Klasse der Fußzeile nav, und stellen 7-Liste oder li-Tags, legen Sie die Menüoptionen in ihnen, damit sie verknüpfbar mit den Anker-Tags, und schließen Sie die ul-Tag.

In Social Icons

<Ul class = "social_icon">
<Li> <a href="#" class="facebook"> </a> </ li>
<Li> <a href="#" class="google"> </a> </ li>
<Li class = "letzte"> <a href="#" class="twitter"> </a> </ li>
</ Ul>
</ Section>

In der Fußzeile, müssen wir auch drei sozialen Symbole, die Sie mit den jeweiligen Profilen über CSS3 verlinken zu platzieren. Jetzt in der HTML5 wir nicht stellen ihre Bilder, sondern wir werden nur definieren. Also, stellen Sie eine neue ungeordnete Liste mit einer Klasse von sozialen Ikonen. Innerhalb dieses ul-Tag, stellen drei Liste oder li-Tags, und legte drei Anker-Tags, eine in jedem li-Tag und geben sie alle eine Klasse von Facebook, Google, Twitter und in chronologischer Reihenfolge, und schließen Sie die ul und Abschnitt Tags.

Der Footer End

<Ul class = "bottom_nav">
<Li class = "erste"> Copyright © </ li>
<Li> <a href="www.Projectsigns.com"> WWW.ProjectSIGNS.COM </a> </ li>
<Li class = "letzte"> alle Rechte vorbehalten </ li>
</ Ul>

</ Div>
</ Footer>
</ Body>
</ Html>

Um die Fußzeile Ende zu machen, erstellen Sie eine neue ungeordnete Liste Tag, und geben ihm eine Klasse von bottom_nav. Innerhalb dieses ul-Tag, stellen drei Liste oder li-Tags, und legen Sie die entsprechenden Inhalte in ihnen in einer Sequenz, schließen Sie dann die ul, div, footer, Körper und HTML-Tags respectively.Step 6: Fertig!

PSD zu HTML5 Conversion: Hinzufügen eines HTML5 Slider auf eine Webseite - Teil 1
Ab sofort sind wir mit unserer HTML5 Code getan, werden wir nun auf dem CSS3-Datei zu arbeiten, die wir im zweiten Teil dieses Tutorials decken.