Anzeige
Tutorialbeschreibung

Web: Webseiten Layout von A-Z

Web: Webseiten Layout von A-Z


Als erstes erstellt ihr eine neue Datei in der Größe 744x550 px.

 
Bilder
 

Füllt die erste Ebene mit der Farbe: #E1E1E1     Erstellt dann eine neue Ebene und nennt diese Header. Zeichnet nun mit einem Abgerundeten-Rechteck-Werkzeug  euren Header so wie in dem nächsten Bild. Ihr könnt natürlich die Farben eurem ermessen anpassen. Den Verlauf bekommt ihr am einfachsten hin, wenn ihr Rechtskllick auf die Header Ebene macht und in den Fülloptionen euren Verlauf so einstellt, wie ihr ihn benötigt.  

Bilder
 

Nehmt nun nochmal das Abgerundete-Rechteck-Werkzeug und zeichnet, in einer neuen Ebene, euren Content mit der Farbe #FFFFFF. 

Bilder
  

 Markiert nun nochmal die Header Ebene mit STRG+Linksklick. Wählt jetzt das Auswahlrechteck-Symbol. Haltet die ALT-Taste gedrückt und zieht eine Auswahl so, das nur noch ca. 20 Pixel vom Header unten markiert sind.  

Bilder
   

Erstellt jetzt eine neue Ebene und füllt dann die markierte Fläche mit einem Farbverlauf eurer Wahl oder nimmt meine Einstellungen.  

Bilder
  

Hebt die Auswahl mit STRG+D auf und zeichnet nun mit dem Linienwerkzeug und 1px Breite zwei untereinanderliegende Linien, direkt an der oberen Kante der Buttonleiste. Davon die obere mit #7C5B12 und die untere mit #EFD190 Farbton.   Nehmt nun das Slice-Werkzeug und unterteilt euer selbstgemachtes Design so wie in dem folgenden Bild.

 
Bilder
   

Geht dann auf Datei -> Für Web speichern… Übernehmt einfach diese Einstellungen:

 
Bilder


klickt dann auf Speichern. Gebt der Datei einen Namen eurer Wahl. Nun ist es an der Zeit das ganze in eurem Web-Editor zu bearbeiten.
  Sucht in eurem Editor nach diesen Zeilen:  

Bilder


Das bewirkt das ihr in eurem Content auch reinschreiben könnt. Das Design wird sich, je mehr ihr schreibt, auch mit nach unten verschieben.
  Und so könnte es dann zum Schluß aussehen:

Bilder
 

Das fertige Template könnt ihr auf www.pasidesign.de downloaden.
 

Hoffe ich habe damit einigen Anfängern helfen können. Wünsche euch viel Erfolg mit eurer Homepage.

Pasi


Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von Anjanka1904
  • 13.09.2012 - 10:06

naja finde es nicht so besonders.
gerade am ende hätte man mehr beschreiben können !

Portrait von rosebud3
  • 06.01.2012 - 19:59

Mies, dafür 5 Punkte. Mann!

Portrait von Wolkenpapst
  • 22.09.2011 - 15:33

das Tut ist nur 4 Punkte wert..

Portrait von thevee
  • 05.06.2011 - 20:26

Bei dem Titel Webseiten Layout von A-Z habe ich als Anfänger auch echt mehr erwartet. Die 5 Punkte hätt' ich mir gerne für nützlichere Beiträge gespart. Ne Vorschau auf das Folgende wäre nett, dann kann man wenigstens entscheiden ob man seine Punkte für nix verschwendet.

Portrait von Suppenkasper8
  • 20.05.2011 - 21:12

kann mich ebenfalls nur Gunley anschließen..."ziemlich mies" wie ich finde

Portrait von Suppenkasper8
  • 20.05.2011 - 21:12

kann mich ebenfalls nur Gunley anschließen..."ziemlich mies" wie ich finde

Portrait von ezekiel23
  • 08.01.2011 - 11:56

Schließe mich dem unter mir an! Nicht so besonders!
- Tabellen-Layout aus Sicht der Suchmaschinenoptimierung absolutes no go
- Grundgerüst gebaut und dann? Wie die tolle Schrift und der Rest
- für Anfänger ungeeignet - die stehen dann mit nem Haufen HTML-Quellcode da und haben noch immer nicht das, was du in dem Bild vorgibst!

Schade eigentlich! Vielleicht einen 2.Teil erstellen, wie es weiter geht?

Portrait von William2004
  • 17.12.2010 - 14:56

War leider nicht so besonders, habe mehr erwartet. Solltest es vielleicht nochmal überarbeiten.

Portrait von gundleyG
  • 16.12.2010 - 01:39

... ich bin tatsächlich nicht nur leicht verärgert!

Webseiten Layout von A-Z und dazu 5 Stern - 4,58 Punkte in der Wertung ... wofür das denn?

Was wird erklärt?

1. Eine Datei erstellen mit genauen Pixelmaßen und Screenshot
2. Ein Rechteck mit einem Verlauf - genaue Angabe der Farben und Screenshot
3. Ein weißes Rechteck - auch da der Hinweis für die Farbe ffffff - wow! ach ja und mit Screenshot
4. Zwei Linien zeichnen - wieder mit Farbangabe und auch hier fehlt nicht der Screenshot

- und alles was dann wirklich interessant wäre, wird mit zwei weiteren Bildchen abgehandelt:

Ein Screenshot und der Satz Zitat:
Nehmt nun das Slice-Werkzeug und unterteilt euer selbstgemachtes Design so wie in dem folgenden Bild.

...

Sucht in eurem Editor nach diesen Zeilen: ... Das bewirkt das ihr in eurem Content auch reinschreiben könnt.

Aha! ? Wenn ich gesucht habe, dann kann ich reinschreiben... ? oder wie?

Anschließend kommt die Auflösung für diese Peinlichkeit, die hier Tutorial genannt wird: Das fertige Template kann man runterladen - auf einer fremden Seite - ich dachte, Werbung sei hier verboten.

Traurig, dass es Leute gibt, die dazu schreiben, es sei ein tolles Tutorial und alles sei klasse erklärt...

Portrait von begima
  • 15.10.2010 - 15:03

sehr schön, Dankesehr

Portrait von haris_delano
  • 30.09.2010 - 21:17

coole sache, supi tutorial

Portrait von Fossel
  • 23.08.2010 - 10:43

Hey Klasse!

danke für den Beitrag. Hat mir schon sehr geholfen!

Portrait von jr3012
  • 26.07.2010 - 10:32

sehr gutes tutorial.

Portrait von DraQ
  • 05.07.2010 - 20:32

echt gut gemacht...leicht verständlich und schnell nachgembastelt....*thumps up*

Portrait von Flowtjefisher
  • 29.06.2010 - 16:35

prima sache, schnell und sauber! danke schön!

Portrait von dg110
  • 31.05.2010 - 14:03

danke für mich als anfänger sehr gut nachzumachen

Portrait von Haruzept
  • 15.05.2010 - 19:04

super gemacht. Für Einsteiger echt gut aufgebaut und leicht geschrieben

Portrait von ProWeb99
  • 16.04.2010 - 22:23

Danke, super Tutorial!

Portrait von Pet4
  • 10.04.2010 - 10:58

Vielen Dank für diese Tut =) Das hat mir sehr gut geholfen :)

Portrait von BazzKiD
  • 24.03.2010 - 21:08

Das Tutorial is voll gut geworden, werde es demnächst auch selber verwenden, dickes dickes dickes DANKESCHÖN ! :D

x
×
×