Web -Designer sind der Gestaltung ihrer Website Mockups auf Photoshop verwendet . Wenn Sie Ihre Mockup zu einer Live-Website konvertieren müssen , werden einige HMTL und CSS-Kenntnisse nützlich sein . Wenn Sie Ihre Mockup in Ihrer Entwicklung Software oder Plattform wie Dreamweaver Joomla exportieren müssen, können Sie die Umwandlung in ein paar Schritte zu machen. Things You
Photoshop
Dreamweaver
brauchen anzeigen Weitere Anweisungen
1
Doppelklicken Sie auf das Photoshop Mockup . Klicken Sie auf " Datei" und " Für Web und Geräte speichern ", um es zu einem Web -freundliches Format zu exportieren. Wählen Sie ein Dateiformat wie JPEG oder PNG. Stellen Sie eine Bildqualität im nachfolgenden Dialog . Klicken Sie auf " Speichern". Geben Sie einen Namen für Ihr Bild.
2
Crop und trennen Sie Ihren Hintergrund Konzept , Schatten und transparenten Grenze Effekt , Fußzeile und Sidebar Konzepte. Speichern Sie sie in ein lokales Verzeichnis . Die meisten von ihnen sind Layout relevant.
3
zu Dreamweaver gehen . Klicken Sie auf " Datei" und " Neue HTML- Datei . " Eine neue HTML -Datei wird mit den Hauptrahmen wie Header und Body Abschnitt eingestellt werden. Geben Sie einen Namen für die Datei.
4
erstellen CSS -Datei für die Website, indem Sie die " CSS-Stile " auf der rechten oberen Ecke des Dreamweaver . Der rechten Maustaste in den leeren Bereich neue CSS-Regeln erstellen. Wählen Sie "Tag ( definiert ein HTML-Element ) " aus dem Selektor-Typ . Wählen Sie "Körper" und dann auf " New Style Sheet Datei . " Klicken Sie auf " OK" zu starten, um CSS -Datei definieren
5
Importieren Sie Ihre Hintergrundbild und andere Konzept Elemente in Ihrem CSS-Code : background: url ( /images /background.jpg ); Fußzeile : . URL ( /images /footer.jpg ); .
