Wie man ein Div-Layout in Photoshop

Div Layouts sind Designs für Webseiten, die Behälter für Web-Inhalte, wie Bilder, Text und Links enthalten. Sie helfen, ein einheitliches Aussehen für Webseiten zu pflegen. Adobe Photoshop "Slice-Werkzeug" und "Save For Web & Devices" Befehle ermöglichen Benutzern das Erstellen einer Div-Layouts visuell durch Seitenelemente hinzufügen und dann erstellen von Containern direkt auf das Layout statt mithilfe von HTML und CSS Code oder unter Berufung auf vorgefertigte Div Layouts, die auch Kenntnisse von Code anpassen fordern.

Anweisungen

1 Öffnen Sie Photoshop und erstellen Sie ein neues Webdokument, indem auswählen aus dem Menü "Datei > neu" und die "Preset" Drop-Down "Web". Legen Sie Ihre gewünschten Maße für Ihr Layout in den Feldern "Breite" und "Höhe", oder wählen Sie einen Web-Layout-Standardgrößen aus der Dropdown-Liste "Größe".

2 Fügen Sie Ihren gewünschten visuellen Bildern für dein Layout. Dazu gehören Bilder importiert, mit "Datei > Place"-Befehl, Formen, Schaltflächen oder Text, der mit dem "Text-Werkzeug."

3 Wählen Sie das Slice-Werkzeug aus dem Bedienfeld "Werkzeuge", und schneiden Sie jedes Element des Layouts durch Klicken und ziehen über sie mit dem "Slice-Werkzeug" ausgewählt. Erstellen Sie einzelne Segmente für jedes Textelement, Button, Bild oder Linie. Diese Scheiben dienen als Div-Elemente in Ihre Web-Layout.

4 Klicken Sie im Menü "Datei" und wählen Sie "Speichern für Web & Geräte" das Dialogfeld Optimierung zu bringen, mit denen Sie jedes Element des Layouts so einrichten, dass es am besten im Web angezeigt werden kann. Passen Sie die Einstellungen für jedes Segment, das Sie erstellt haben, klicken Sie auf jedes einzeln über das "Slice-Auswahlwerkzeug" oben links im Dialogfeld, und ändern das Format, Qualität und Farbeinstellungen entsprechend auf der rechten Seite des Feldes. Klicken Sie auf "Speichern", wenn Sie jedes Segment nach Ihren Präferenzen optimiert haben.

5 Geben Sie Ihre Layoutdatei, und wählen Sie einen Speicherort für die es in den angegebenen Bereichen die "optimiert" im Dialogfeld Speichern unter. Ändern Sie die "Format" Dropdown-Menü "HTML und Bilder" und stellen Sie sicher, dass die "Einstellungen" und "Slices" Drop-Downs auf "Default Settings" und "Alle Slices" festgelegt sind. Klicken Sie auf "Speichern". Ihr Layout ist nun bereit, in einem Web-Editor wie Dreamweaver geöffnet werden, wo Sie Links und Verhaltensweisen die Div-Abschnitte hinzufügen können, die Sie erstellt, mit dem "Slice-Werkzeug."