Wie man ein Div -Layout in Photoshop machen . Sie helfen, eine einheitliche Optik für Web-Seiten. Adobe Photoshop " Slice-Werkzeug " und "Save for Web & Devices" -Befehle ermöglichen es Benutzern, eine Div Layout visuell erstellen , indem Sie Elemente einer Seite und dann schaffen , die direkt auf dem Layout , anstatt mit HTML und CSS-Code oder unter Berufung auf vorgefertigten div Layouts , die auch erfordern Kenntnisse des Codes anpassen . Things You
Adobe Photoshop Software
brauchen anzeigen Weitere Anweisungen
1
Öffnen Sie Photoshop und erstellen Sie eine neue Web-Dokument , indem Sie " Datei> Neu" aus dem Menü und Einstellung der "Preset " drop-down auf " Web ". Stellen Sie Ihren gewünschten Abmessungen für Ihr Layout in der "Breite" und "Höhe" Felder , oder wählen Sie eine der Standard-Web- Layout Größen aus der " Größe " drop-down .
2
Fügen Sie Ihre gewünschten visuellen Bilder zu Ihrem Layout. Diese können Bilder importiert mit dem "File > Place" -Befehl , Formen , Schaltflächen oder Text mit der " Text-Werkzeug . "
3
Wählen Sie den " Slice-Werkzeug " aus den Optionen Systemsteuerung und in Scheiben schneiden jedes Element Ihres Layouts durch Klicken und Ziehen über ihn mit dem " Slice-Werkzeug " ausgewählt . Erstellen Sie für jeden einzelnen Scheiben Textelement , Knopf , Bild oder Linie . Diese Scheiben werden als die Div Elemente in Ihrem Web-Layout dienen .
4
Klicken Sie auf das Menü "Datei" und wählen Sie " Für Web und Geräte speichern " , um das Dialogfeld Optimierung , die es erlauben Sie zum Einrichten jedes Element Ihres Layouts , so dass es am besten auf dem Web angezeigt werden. Passen Sie die Einstellungen für jedes Slice erstellt , indem Sie auf die jeweils individuell mit dem " Slice-Auswahl- Werkzeug " in der oberen linken Ecke des Dialogfeld und Ändern des Formats , Qualität und Farbeinstellungen entsprechend auf der rechten Seite der Box. Klicken Sie auf " Speichern" , wenn Sie jede Scheibe , um Ihre Einstellungen optimiert wurden.
5
Name your Layout -Datei und wählen Sie einen Speicherort für die es in den angegebenen Feldern im Dialogfeld "Als Optimiert Speichern". Ändern Sie das " Format " Drop-Down " HTML und Bilder " und stellen Sie sicher, die "Einstellungen " und " Slices " drop- downs "Standardeinstellungen " und " Alle Slices " entsprechend eingestellt sind . Klicken Sie auf " Speichern". Ihr Layout ist nun bereit, in einem Web - Editor wie Dreamweaver , wo Sie Links und Verhaltensweisen zu den Div Abschnitte, die Sie mit der erstellten hinzufügen können geöffnet werden " Slice-Werkzeug . "
