Einführung in das Weblayout

Das Layout bezieht sich auf die Verteilung der Elemente in einem bestimmten Bereich der Seite, während das redaktionelle Design andere Elemente umfasst, die vom grafischen Projekt bis zu den Produktionsprozessen reichen, die auch Druckvorbereitung genannt werden. Dieser Vorgang wird jedoch als Layout bezeichnet .

Um mit dem Entwerfen eines Webs zu beginnen, müssen 3 Programme wie PhotoShop, Fireworks und Dreamweaver vorhanden sein . Gleichzeitig sind Vorkenntnisse in HTML-Code unerlässlich. HTML beschreibt die Struktur und den Inhalt einer Site in Form von Text. Die Elemente in HTML bestehen aus einer Anfangsbezeichnung und einer Endbezeichnung, zwischen denen ein Inhalt platziert wird.

maquetacion.jpg

Als der Einsatz von Multimedia-Inhalten im Web massiv begann, erschien er in HMTL-Code 5, um diese Aufnahme zu erleichtern. HTML5 hat die folgenden Eigenschaften.

  • Sei nicht privat
  • Flexibel
  • Verwendete Standards

Vor Beginn der Arbeit mit dem Layout muss der Designer mit einem Projekt gearbeitet haben, in dem er die Bedürfnisse seiner Kunden widerspiegelt:

maquetacion4.jpg

Anschließend wird das PhotoShop-Programm (PSD) geöffnet, um das Projekt anzuzeigen:

maquetacion5.jpg

Anschließend analysieren Sie die allgemeinen Elemente, dh organisieren die Seite als Gruppen.
Sie können sehen, dass der Hauptteil der Seite die Gesamtheit des Projekts ist, in dem Sie die verschiedenen Elemente gruppieren werden. Beispiel: Innerhalb des Inhalts können Sie die beiden Logos in einer Ebene gruppieren, die sich in der befinden Oberteil:

maquetacion6.jpg

Nachdem Sie das Basisprojekt in PhotoShop analysiert haben, können Sie mit Fireworks arbeiten:
Das Projekt wird mit Fireworks geöffnet:

maquetacion7.jpg

Mit dem Fireworks-Unterteilungstool beginnen sie, die einzelnen Elemente des Entwurfs einzurahmen:

maquetacion8.jpg

Sobald die Unterteilungen der Elemente vorgenommen wurden, werden sie zusammen ausgewählt und als HTML und Bilder exportiert. Auf diese Weise generieren Sie Dateien für jede Abteilung.

See also  Kostenlose TrueCrypt-Alternative zum Verschlüsseln: VeraCrypt

maquetacion9.jpg

administrator

Leave a Reply

Your email address will not be published. Required fields are marked *