Tutorial: Bringen Sie Ihr minimalistisches Webdesign von Photoshop nach HTML, Teil 2

In meinem letzten Beitrag "Tutorial: Bringen Sie Ihr minimalistisches Webdesign von Photoshop zu HTML" haben wir begonnen, die PSD-Datei aufzuteilen, Hintergrundbilder für die HTML-Seite zu erstellen und dann unseren grundlegenden HTML-Code (index.html) und einige andere zu starten Stile zum Einrichten der verschiedenen Abschnitte (styles.css). Unsere anfänglichen Stile legen die Haupt-, Container-, Kopf-, linke Seitenleisten- und rechte Seitenleisten-Spalte fest, die auch die Funktionsinhaltsabschnitte für ein Bild und zwei Funktionsartikel enthält. Der Download enthält alle in dieser Demonstration verwendeten Dateien.

Hinzufügen von Stilen und Erstellen des HTML

Wenn Sie dort weitermachen, wo wir im vorherigen Artikel aufgehört haben, fügen Sie zunächst weitere Stile für die verbleibenden Bilder hinzu, fügen den Inhaltstext hinzu und verknüpfen den Navigationsabschnitt, die Titel für die vorgestellten Artikelabschnitte und den Funktionsinhalt. Abbildung A zeigt, wie unsere index.html-Datei an diesem Punkt aussieht, wie in Chrome 17.0.9 gerendert:

Abbildung A.

Beginnen wir mit dem Hinzufügen des Header-Bildes oben links im Header-Bereich. Damit das Bild angezeigt werden kann, fügen wir der Datei styles.css mehrere Zeilen mit Stilen hinzu und fügen der Datei index.html auch Textinhalte hinzu. Ich habe den durchgehenden roten Rand von 1 Pixel vorerst beibehalten, aber er wird entfernt, wenn wir uns durch das Tutorial bewegen. Die Datei headername.gif wird als Hintergrundbild als URL aufgerufen, die Höhe wird auf 100 Pixel festgelegt, der Rand oben wird auf 50 Pixel festgelegt, die Schriftfamilie, Größe und Farbe werden auf Tahoma, 14 Pixel und # 4b6262 festgelegt Ein oberer Abstand von 18 Pixel und ein linker Abstand von 15 Pixel runden die Ergänzungen des Styling-Codes zur Datei styles.css ab, die unten angezeigt werden:

 Kopfzeilenstile: 
 #Header { 
 Rand: 1px durchgehend rot; 
 Hintergrundbild: URL (images / headername.gif); 
 Hintergrundwiederholung: keine Wiederholung; 
 Höhe: 100px; 
 Rand oben: 50px; 
 Schriftfamilie: Tahoma, Genf, serifenlos; 
 Schriftgröße: 14px; 
 Schriftgröße: normal; 
 Farbe: # 4b6262; 
 Polsterung: 18px; 
 Polsterung links: 15px; 
 }} 
 Der HTML-Code, der dem Header der Datei index.html hinzugefügt wurde: 

Der Slogan oder das Schlagwort der Überschrift

 Abbildung B zeigt die obigen Updates in Chrome 17.0.9: 

Abbildung B.

Als Nächstes erstellen wir unsere Suchleiste und die Schaltfläche "Senden" für das letzte Stück des Kopfzeilenabschnitts. Bevor wir mit dem Code beginnen, müssen wir den Pfeil der Schaltfläche "Senden" erfassen, den wir in der ursprünglichen PSD-Datei erstellt haben (siehe Download). Mit den gleichen Verfahren wie im ersten Abschnitt des Lernprogramms öffnen wir die PSD-Datei in Photoshop und machen die Schaltflächenebenen zu den einzigen sichtbaren Ebenen. Schneiden Sie sie zu, um sie an den Pfeil und den Verlauf anzupassen, skalieren Sie sie auf etwa 50 x 35 Pixel und speichern Sie sie dann als webfähiges GIF und nennen Sie es search_button.gif und speichern Sie es im Webbildverzeichnis :

Abbildung C.

Der Code für die Suchleiste enthält mehrere CSS3-Ergänzungen für Farbverläufe, Rahmenradius, Feldschatten und Hintergründe. Die Aktualisierungen der Datei styles.css werden unten angezeigt:

 / * Formulare suchen * / 
 #bilden { 
 Rand links: 700px; 
 }} 
 .Suche { 
 Anzeige: Inline-Block; 
 Zoom: 1; / * Anzeige: Inline-Block für IE7 * / 
 * Anzeige: Inline; 
 Rand: fest 1px # d2d2d2; 
 Polsterung: 1px 1px; 
 -webkit-border-radius: 7px; 
 -Moz-Rand-Radius: 7px; 
 Randradius: 7px; 
 -webkit-box-shadow: 0 1px 0px rgba (0, 0, 0, 0, 1); 
 -moz-box-shadow: 0 1px 0px rgba (0, 0, 0, 0, 1); 
 Kastenschatten: 0 1px 0px rgba (0, 0, 0, 0, 1); 
 Hintergrund: # b9c7c7; 
 Hintergrund: -webkit-gradient (linear, links oben, links unten, von (# b9c7c7) bis (#ededed)); 
 Hintergrund: -moz-linear-gradient (oben, # b9c7c7, #ededed); 
 filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# b9c7c7', endColorstr = '# ededed'); / * ie7 * / 
 -ms-filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# b9c7c7', endColorstr = '# ededed'); / * ie8 * / 
 }} 
 .sucheingabe { 
 Schriftfamilie: Tahoma, Genf, serifenlos; 
 Schriftgröße: 22px; 
 Farbe: # e0e9e9; 
 }} 
 .Suchfeld { 
 Hintergrund: # b9c7c7; 
 Polsterung: 0px 2px 3px 12px; 
 Breite: 190px; 
 Rand: fest 1px #bcbbbb; 
 Umriss: keine; 
 -webkit-border-radius: 7px; 
 -Moz-Rand-Radius: 7p; 
 Randradius: 7px; 
 -moz-box-shadow: Einschub 0 1px 2px rgba (0, 0, 0, .2); 
 -webkit-box-shadow: Einschub 0 1px 2px rgba (0, 0, 0, .2); 
 Kastenschatten: Einschub 0 1px 2px rgba (0, 0, 0, .2); 
 }} 
 .search .button { 
 Rand unten: -10px; 
 }} 

Der HTML-Abschnitt und der Code werden dem Header-Abschnitt direkt unter dem hinzugefügt

Untertitel in der Datei index.html wie unten angezeigt:

 Abbildung D zeigt den resultierenden Header-Abschnitt, wie er in Chrome 17.0.9 angezeigt wird: 

Abbildung D.

Die in diesem Lernprogramm enthaltenen Suchfunktionen dienen nur zu Demonstrationszwecken und sind eigentlich keine funktionierende Suche. (Für durchsuchbare Inhaltsergebnisse müsste eine Datenbank-Back-End-Verbindung implementiert werden.)

Als Nächstes fügen wir das Styling und den HTML-Code für die linke Navigationsseitenleiste mit den Textinhalten "Info", "Blog", "Produkte", "Dienste" und "Kontakt" hinzu. Alle Hyperlinks verweisen auf "Dummy" -Seiten, damit dieses Tutorial weitergeht. Wenn Sie jedoch einen Link zu tatsächlichen Unterseiten erstellen möchten, müssen Sie lediglich die endgültige Datei index.html als Vorlage verwenden und diese nach Bedarf für die verbleibenden Seiten umbenennen. Zuerst wird der HTML-Code für die Navigation in eine ungeordnete Liste gesetzt und ist der einzige Code, der dem linken Seitenleistenabschnitt hinzugefügt wird, wie unten dargestellt:





  • Das CSS-Design wird in der linken Seitenleiste für Anker- und Listenelemente hinzugefügt und mit einer Änderung am Rand für die Ausrichtung auf -35 Pixel festgelegt.

     #left_sidebar { 
     Rand oben: 10px; 
     Rand links: -35px; 
     float: left; 
     oben: 0; 
     links: 0; 
     Breite: 200px; 
     Mindesthöhe: 750px; 
     Überlauf: auto; 
     Polsterung links: 5px; 
     Polsterung rechts: 5px; 
     }} 
     #left_sidebar a, li { 
     Schriftfamilie: Tahoma, Genf, serifenlos; 
     Schriftgröße: 22px; 
     Schriftstil: normal; 
     Schriftgröße: 600; 
     Farbe: # 4b6262; 
     Textdekoration: keine; 
     Listenstil: keine; 
     }} 
    Abbildung E zeigt die resultierenden Aktualisierungen für den Navigationsabschnitt, wie in Chrome 17.0.9 gerendert:

    Abbildung E.

    Als Nächstes fügen wir das Styling für unsere vorgestellten Inhaltsbereiche hinzu, die in den linken und rechten Unterabschnitten innerhalb des rechten Spaltenabschnitts und direkt unter dem Feature-Image unterteilt sind. Die Styling-Ergänzungen in der rechten Spalte enthalten Schriftarten und einige CSS3-Textschatteneffekte für die Feature-Titel sowie ein separates Schrift-Styling für den Feature-Artikel. Die zusätzlichen Styles, die der Datei style.css hinzugefügt wurden, werden unten angezeigt:

     #right_column .feature_title { 
     Schriftfamilie: Tahoma, Genf, serifenlos; 
     Schriftgröße: 22px; 
     Schriftgröße: 500; 
     Farbe: # 1f2626; 
     Rand oben: -5px; 
     Textschatten: 2px 1px 2px # 656e6e; 
     Filter: Dropshadow (Farbe = # 656e6e, offx = 2, offy = 1); 
     }} 
     #right_column .feature_article { 
     Schriftfamilie: Verdana, Genf, serifenlos; 
     Schriftgröße: 14; 
     Schriftgröße: normal; 
     }} 

    Der der Datei index.html hinzugefügte HTML-Code wird unten angezeigt:

    Ausgewählter Inhalt Titel 1

    "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud übung velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat nicht proident, sunt in culpa qui officia deserunt mollit anim id est laborum. "

    Ausgewählter Inhalt Titel 2

    "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud übung velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat nicht proident, sunt in culpa qui officia deserunt mollit anim id est laborum. "

     Abbildung F zeigt das Ergebnis mit den in Chrome 17.0.9 angezeigten Abschnitten zu Funktionsartikeln: 

    Abbildung F.

    Abbildung G zeigt die aktuelle Webseite mit den neuesten hinzugefügten HTML- und CSS-Stilen und den entfernten roten Rändern aus den Kopf- und Containerabschnitten. Der rote Rand des Fußzeilenabschnitts bleibt jedoch erhalten, um sie von den konvertierten Abschnitten zu unterscheiden.

    Abbildung G.

    Das dritte und letzte Segment der Tutorialserie "Minimalist PSD to HTML" wird mit dem Hinzufügen in der Fußzeile abgeschlossen, einschließlich der Erstellung eines CSS3-gestalteten Verlaufs.

    © Copyright 2021 | mobilegn.com