Ein Web-Template ist eine grundlegende Web page layout --- oder Behälter --- Sie wiederverwenden können , um mehrere Seiten zu erstellen. Die Vorlage stellt die grundlegende Struktur für Ihre Website, so dass Sie ein durchgängiges Thema und das Layout der gesamten Website , ohne jede Seite neu zu halten. Während Photoshop ist technisch nicht ein Web -Design -Programm , können Sie es verwenden, um Web -Vorlagen von " Schneiden " der PSD Bild in verschiedene Abschnitte und dann den Export der PSD zu HTML- Web -Seite zu erstellen . Anschließend können Sie das HTML-Template -Datei in Dreamweaver oder einen anderen Web -Design-Programm und verwenden Sie es , um die Seiten für Ihre Website erstellen . Things You
Adobe Photoshop CS3 oder höher
brauchen anzeigen Weitere Anweisungen
1
Starten Sie ein neues Dokument in Photoshop. Geben Sie ihm die Dimensionen , die Sie für Ihre Web-Seiten verwenden , wie folgt aus: Klicken Sie auf " File" in der Menüleiste und wählen Sie " Neu", um das Dialogfeld Neu zu öffnen. Geben Sie die Breite (in Pixeln) in der "Breite" Field und der Höhe (in Pixeln) in der "Höhe " ein. Klicken Sie auf " OK".
2
Erstellen Sie die Banner für Ihre Webseite. Das Banner , natürlich, ist die Grafik oder ein Bild , das über den oberen Rand der Seite zeigt . Es besteht meist aus einem Firmenlogo und einige andere Grafiken im Zusammenhang mit einem Produkt oder einer Dienstleistung. Sie können entweder ein vorhandenes Bild einfügen oder verwenden Photoshop Farbe und Text-Tools , um das Banner zu erstellen.
3
Erstellen Sie die Buttons für Ihre Web -Seite. Diese werden Links oder "hot spots ", die die Website-Nutzer nehmen auf verschiedene Seiten innerhalb der Website geworden . Entweder legen Sie vorhandene Schaltfläche Bilder und legen Sie sie , wo man sie in der Vorlage wollen oder verwenden Sie Photoshop- Farbe und Text-Tools , um die Tasten zu erstellen.
4
Wählen Sie den " Slice-Werkzeug " (fünfte Taste von oben in die Toolbox ) . Wenn Sie nicht das Slice -Werkzeug verwendet haben, ist diese Schaltfläche wahrscheinlich ein anderes Werkzeug gesetzt . Klicken und halten Sie die Taste , und wählen Sie dann " Slice-Werkzeug " aus dem fly -out.
5
Ziehen Sie das Slice-Werkzeug um die erste Schaltfläche oder einen Bereich in der Vorlage , wo Sie wollen , um einen Link zu erstellen. Dadurch entsteht ein " Slice" -Box um das Objekt. Photoshop legt dieses Feld in eine Zelle , die eine eigene HTML-Tabelle werden wird , wenn Sie dieses Dokument in HTML exportieren .
6
rechten Maustaste auf die neue Scheibe , und wählen Sie " Bearbeiten Slice-Optionen " aus dem fly- out-Menü . Es öffnet sich das Dialogfeld Slice-Optionen .
7
Geben Sie die URL Sie diese Taste, um in das Feld "URL" verknüpfen. Sie können auch andere Informationen für den Button , wie die Ziel-Browser -Seite, und alternative Tags. Wenn Sie die Größe und Position der Scheibe zu bearbeiten , also mit den Optionen in der "Masse " des Dialogfeld wollen . Klicken Sie auf " OK".
8
Wiederholen Sie die vorherigen Schritte für das Erstellen und Bearbeiten von Slices Slice-Optionen für jede Taste in der Vorlage.
9
Klicken Sie auf " File" auf der Speisekarte Bar und wählen Sie "Speichern für Web und Geräte speichern ". Es öffnet sich das Für Web und Geräte Dialogfeld Speichern unter. Von hier aus können Sie verschiedene Aspekte Ihrer Vorlage , wie Hintergrundfarbe , Bildkompression und-qualität, Dokument Größe und so weiter. Diese Optionen sind gut beschriftet und sprechen für sich. (Sie können den HTML-Code für diese Vorlage durch Klicken auf die Schaltfläche "Vorschau" eine Vorschau . )
10
Klicken Sie auf die Schaltfläche "Speichern" . Benennen und speichern Sie die HTML-Datei . Sie haben erfolgreich Ihr Web Template erstellt . Sie können jetzt in einem Web -Editor und fügen Sie Ihre Inhalte.
