Das heutige Tutorial bringt Ihnen bei, wie Sie DIV+CSS verwenden, um die PSD -Seite in HTML -Seiten zu schneiden. Diese Website hat immer nur sehr wenig Tutorials durchgeführt, und die meisten von ihnen sind relativ fragmentarisch. In Zukunft werden wir langsam weitere Tutorials wie diese veröffentlichen und übersetzen.
Schauen Sie sich zunächst den Effekt an
Das Bild unten ist die Renderings. Nach dem Ausschneiden kann der Kopf und der Boden breiter sein ...
Erstellen Sie einen neuen Ordner
Erstellen Sie zunächst einen Ordner in Ihrem Computer. Ich habe es Zmool genannt. Erstellen Sie dann neue Ordnerbilder im Ordner und platzieren Sie alle Bilder der Website. Öffnen Sie als nächstes den Code -Editor (Dreamweaver) und erstellen Sie eine HTML -Datei mit dem Namen index.html im Stammverzeichnis, das unsere Homepage -Vorlage ist. Erstellen Sie nun eine neue CSS -Datei und nennen Sie sie die Datei style.css. Wie in der Abbildung unten gezeigt:
Öffnen Sie die Datei index.html. Fügen Sie den Link zu Ihrem Stylesheet (style.css) oben im Kopf -Tag hinzu. Sie können den folgenden Code verwenden.
<link href = style.css rel = stylesheet type = text /css />
Der Header -Code lautet wie folgt:
<! DocType html public -// w3c // dtd xhtml 1.0 transitional // en http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd><Html xmlns = http: //www.w3.org/1999/xhtml> <kopf> <meta http-equiv = content-type content = text/html; charset = utf-8/> <titels> Modernes Design Studio </title> <link href = style.css
Erstellen Sie die HTML -Struktur
Jetzt werden wir die HTML -Dateistruktur einrichten. Setzen Sie 3 Abschnitte (Titel, Inhalt, Fußzeile) wie unten:
<! DocType html public -// w3c // dtd xhtml 1.0 transitional // en http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd><Html xmlns = http: //www.w3.org/1999/xhtml> <kopf> <meta http-equiv = content-type content = text/html; charset = utf-8/> <title> Untitled-Dokument </title> <link rel = styleSheet type = text/css href = style.css/> </head> <body> <div id = header> </div> <div id = content> </div> <div id = footer> </div> </body> </html> </html> </html> </html> </html> </html> </html> </html> </html> </html>
Hintergrund schneiden
Unsere PSD -Datei enthält viele Textureffekte. Wir müssen all dies ausschneiden und sie dann mit Code zur Webseite hinzufügen, um den Div -Page -Effekt mit dem Entwurfseffekt übereinzustimmen.
<body> <div id = header> <div id = container> </div> </div> <div id = content> <div id = container> </div> </div> <div id = footer> <div id = container> </div> </div> </body>
Öffnen Sie nun die ursprünglich entworfene Ebene in Photoshop und verstecken Sie sie mit Ausnahme der Hintergrundschicht.
Nehmen Sie nun das Slicing -Tool, wählen Sie den Hintergrund und speichern Sie das Web -Web -Webformat (Alt + Shift + Strg + S). Anschließend heißt die Datei gespeicherter Bildordner von Hintergrund.jpg.
Hintergrundstil setzen
Öffnen Sie die Datei style.csss und setzen Sie den Grundstil, den Hintergrundstil und die Breite des Hauptteils wie folgt:
* {Margin: 0px; Padding: 0px;} Body {Hintergrund: URL (Bilder/Hintergrund.jpg);}#Container {Margin: Auto; Breite: 960px;}Schneiden Sie den Kopf
Kehren Sie zu Photoshop zurück, verbergen Sie die sogenannte Ebene mit Ausnahme des Kopf-Hintergrunds und verwenden Sie die gleiche Methode, um das Bild des Kopfhintergrunds in das Webformat zu schneiden, und speichern Sie den Dateinamen als head.jpg.
Bearbeiten Sie den Kopf -Hintergrundcode
Bearbeiten Sie den folgenden Code in der Datei style.css:
#Header {Hintergrund: URL (Bilder/Header.jpg); Höhe: 124px;}Schneiden Sie das Kopflogo
Schneiden Sie zu diesem Zeitpunkt die Logoschicht und verbergen Sie alle Ebenen, einschließlich der Hintergrundschicht. Schneiden Sie die Logo -Ebene als oben genannte Methode aus, um sie als Logo zu speichern. Hinweis: Speichern Sie es als PNG -Formatbild.
Hinzufügen, um Logo auf der Seite hinzuzufügen
Kehren Sie nun zu HTML zurück und fügen Sie den folgenden Code <Div ID = Logo>…. </Div> in #header #Container hinzu.
<div id = header> <div id = container> <div id = logo> <a href =#> <img src = bilder/logo.png> </a> </div> </div> </div>
Wechseln Sie nun in die Datei style.csss unten und schreiben Sie den #Logo -Stil.
#Logo {Margin-Top: 20px; Grenze: Keine;}Editor -Navigationscode
Unten finden Sie den Code auf der Seite. Der Header enthält zwei Teile: Logo und Navigation.
<div id=header> <div id=container> <div id=logo><a href=#><img src=images/logo.png></a></div> <ul> <li><a href=#>Home</a></li> <li><a href=#>About</a></li> <li><a href=#>Work</a></li> <li> <a href =#> blog </a> </li> <li> <a href =#> Kontakt </a> </li> </div> </div>
Der Navigationsstil ist wie folgt:
Fügen Sie nun die Navigationsstile in der CSS -Tabelle, UL, Li hinzu und verlinken Sie einen Stil:
#header li {color:#959595; Listenstil: Keine; float: links; Margin-Right: 20px; Schriftfamilie: Myriad Pro, Arial; Schriftgewicht: BOLD; Schriftgröße: 24px;}#Header li a {color:#959595; ul {float: rechts; Margin-Top: -40px;}#Header Li a: Hover {Hintergrund:#202020; Farbe:#D2D2D2; -MOZ-BORDIUS: 5PX; -KHTML-BORDIUS: 5PX;Machen Sie jetzt den mittleren Teil
Jetzt fügen wir dem mittleren Teil des Seiteninhalts zwei Divs hinzu, wie in der folgenden Abbildung gezeigt:
<div id = content> <div id = container> <div id = vorgebracht> </div> <div id = Absätze> </div> </div> </div>
Wechseln Sie zur PSD -Seite von Photoshop, schneiden Sie den mittleren Teil ab und nennen Sie es. JPG. Die folgende Abbildung:
Fügen Sie Ihrer HTML -Seite den folgenden Code hinzu und einige Texteinführung:
<div id = content> <div id = container> <div id = vorgestellt> <a href =#> Weitere Projekte </a> <p> <span> Portfolio -Projekt, 5. Januar 2010 </span> Wollten Sie schon immer ein sauberes und schönes Portfolio -Design erstellen? In diesem Tutorial werde ich Ihnen zeigen, wie Sie sauberes Blue Portfolioo -Layout entwerfen. Wollten Sie schon immer ein sauberes und schönes Portfoliodesign erstellen? In diesem Tutorial zeige ich Ihnen, wie Sie in Adobe Photoshop sauberes Blau -Portfolio -Layout entwerfen.
Verstecken Sie in der PSD-Datei andere sogenannte Ebenen, lassen Sie nur den Schaltflächenteil, schneiden Sie das Schaltflächenteil, speichern Sie das PNG-Format und nennen Sie es die Taste.
Jetzt fügen wir diese Bilder zur Seite hinzu, wechseln zur CSS -Dateiseite und fügen den folgenden Code hinzu, der den Hintergrundstil und den Schaltflächenstil enthält.
#Featured {Hintergrund: URL (Bilder/Featured.jpg) No-Repeat; Höhe: 381px; Margin-Top: 30px; Margin-Links: 80px;}#Featured A {Hintergrund: URL (Bilder/Taste.png); Höhe: 30px; Breite: 124px; Text-Indent: -9999px; Position: Absolute; Margin-Top: 330px; Margin-Links: 180px;}#enthüllt a: Hover {Hintergrundposition: 0px 30px;};};};};}}}Fügen wir nun einige Dummytext -Stile hinzu:
.DummyText {Farbe:#D2D2D2; Breite: 245px; Margin-Top: 150px; Position: Absolute; Schriftfamilie: Arial, Helvetica, sans-serif; Schriftgröße: 12px; Zeilenhöhe: 180%; Span {Schriftgröße: 16px; Farbe:#191919; Schriftgewicht: BOLD;}Das Folgende wird hinzugefügt, um Bilder hinzuzufügen, um den folgenden Abschnitt der Kategorie Einführung anzuzeigen
Der Code -Teil der Seite lautet wie folgt.
<div ID = Absätze> <p> <Pan> Beautiful </span> Webdesignfan ist ein Design -Blog über Webdesign, Photoshop, Werbegeschenke und Tutorials. Wir veröffentlichen nützliche Informationen, die Webdesignern und Entwicklern gewidmet sind. Hier finden Sie kostenlose Ressourcen wie Vektoren, WordPress -Themen und viel Inspiration. </p> <p> <span> Effektiv </span> Webdesignfan ist ein Design -Blog über Webdesign, Photoshop, Werbegeschenke und Tutorials. Wir veröffentlichen nützliche Informationen, die Webdesignern und Entwicklern gewidmet sind. Hier finden Sie kostenlose Ressourcen wie Vektoren, WordPress -Themen und viel Inspiration. </p> <p> <span> Funktional </span> webdesignfan ist ein Design -Blog über Webdesign, Photoshop, Werbegeschenke und Tutorials. Wir veröffentlichen nützliche Informationen, die Webdesignern und Entwicklern gewidmet sind. Hier finden Sie kostenlose Ressourcen wie Vektoren, WordPress -Themen und viel Inspiration. </p> </div>
Der Inhalt in unserem mittleren Teil sollte so aussehen:
<div id = content> <div id = container> <div id = vorgestellt> <a href =#> Weitere Projekte </a> <p> <span> Portfolio -Projekt, 5. Januar 2010 </span> Wollten Sie schon immer ein sauberes und schönes Portfolio -Design erstellen? In diesem Tutorial werde ich Ihnen zeigen, wie Sie sauberes Blue Portfolioo -Layout entwerfen. Wollten Sie schon immer ein sauberes und schönes Portfoliodesign erstellen? In diesem Tutorial zeige ich Ihnen, wie Sie in Adobe Photoshop sauberes Blau -Portfolio -Layout entwerfen. Wir veröffentlichen nützliche Informationen, die Webdesignern und Entwicklern gewidmet sind. Hier finden Sie kostenlose Ressourcen wie Vektoren, WordPress -Themen und viel Inspiration. </p> <p> <span> Effektiv </span> Webdesignfan ist ein Design -Blog über Webdesign, Photoshop, Werbegeschenke und Tutorials. Wir veröffentlichen nützliche Informationen, die Webdesignern und Entwicklern gewidmet sind. Hier finden Sie kostenlose Ressourcen wie Vektoren, WordPress -Themen und viel Inspiration. </p> <p> <span> Funktional </span> webdesignfan ist ein Design -Blog über Webdesign, Photoshop, Werbegeschenke und Tutorials. Wir veröffentlichen nützliche Informationen, die Webdesignern und Entwicklern gewidmet sind. Hier finden Sie kostenlose Ressourcen wie Vektoren, WordPress -Themen und viel Inspiration. </p> </div> </div> </div>
Gehen Sie zu Ihrer CSS -Datei und fügen Sie den folgenden Code hinzu.
#paragraphs span {font-family: myriad pro, helvetica, sans-serif; font-size: 22px; Schriftgewicht: 600; Buchstabe-2px;}#Absätze {Margin-Links: 80px; Schriftfamilie: ARIAL, HELVetica, Helvetica, sans-serif; Farbe:#191919; Schriftgröße: 12px; Margin-Top: 15px;}.Das haben wir bisher getan:
Der Ende der Website wird unten behandelt
Jetzt, wo wir diesen Teil davon beendet haben, werden wir die Fußzeile erstellen.
Verstecken Sie zuerst in Ihrer PSD -Datei andere Ebenen mit Ausnahme der Fußzeile und der Fußzeile Texturschichten und schneiden Sie dann die Foot -Ordner -Zeug als Footer.jpg auf.
Schneiden Sie es dann erneut aus und schneiden Sie die Knopf- und Vogelgrafik. Nennen Sie es folgen.png bzw. Bird.jpg.
Bearbeiten Sie den unteren Code
Die untere Fußzeile enthält einen Text und ein Bild des Vogels mit einem Link.
Fügen Sie also den folgenden Code zur HTML -Seite hinzu.
<div id = footer> <div id = container> <p> 2010? Fiktives Designstudio. Design von webdesignfan.
Bearbeiten Sie nun den Code im Fußzeilenstil unten wie folgt:
#footer {Hintergrund: URL (Bilder/footer.jpg); Höhe: 71px; Margin-Top: 191px;}#Fußball P {Schriftfamilie: Arial, Helvetica, sans-serif; font-size: 12px; Farbe:#959595; A {Hintergrund: URL (Bilder/folgen.png); Text-Indent: -9999px; Position: Absolute; Höhe: 27px; Breite: 124px; Margin-Links: 730px; Margin-Top: 30px;}#footer img {float: rechts; margin-top: 10px;};}}}}Wir verwenden footer.jpg als Hintergrund der Fußzeile und fügen dann einige Textstile hinzu.
Für den Link zum Vogelbild unten verwendeten wir die gleiche Methode zuvor mit dem schwimmenden Effekt, um es zu positionieren.
Endwirkung
Datei -Download (0,7 MB)
Auch jetzt ist es vorbei. Ich weiß nicht, ob Sie es verstehen. Wenn Sie es nicht verstehen, hinterlassen Sie eine Nachricht. Wenn Sie es nicht verstehen, füge und modifiziere ich es erneut, haha ~