spacer spacer

spacer
:: PIXELPLOW!
:: TUTORIALS
Neue Tutorials
Top Tutorials
 •  Alle A-Z
Wie funktionierts?
Tutorials Text
Tutorials Photo
Charakter Design
Interface Design
Tutorials sonstiges
:: AKTIONEN
:: PHOTOSHOP BLOG
:: TIPPS+TRICKS
:: NEWSLETTER
:: SHOP
:: LINKS
:: MEMBERS
spacer

spacer



Passwort vergessen?
spacer

spacer

Foto-Effekte mit PixelShapes.com

Homepage erstellen mit Wix.com

Partner QUEEKY
queeky.de

Partner CSSFly web tools
cssfly

spacer

spacer


Ich habe die AGB gelesen und akzeptiert

spacer

spacer


Hier kannst Du dich für den Newsletter eintragen / austragen

spacer

spacer



spacer

spacer
Tag - Suche einblenden | ausblenden
::  Alle A-Z

<< Webseiten Layout von A-Z (PS7) 10 Credits / 15890 Views von Pasidesign am 22.09.2006 um 23:25 Uhr  

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



  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 Rechtsklick auf die Header Ebene macht und in den Fülloptionen euren Verlauf so einstellt, wie ihr ihn benötigt.



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



  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.



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



  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.



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



  Und 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:

img src="Bilder/images_13.gif" WIDTH=18 HEIGHT=334 ALT=""
img src ="Bilder/images_14.gif" WIDTH=710 HEIGHT=334 ALT=""
img src ="Bilder/images_15.gif" WIDTH=16 HEIGHT=334 ALT=""

Und ersetzt sie damit:

background="Bilder/images_13.gif" WIDTH=18 HEIGHT=334 ALT=""
background="Bilder/images_14.gif" WIDTH=710 HEIGHT=334 ALT="" valign="top"
background="Bilder/images_15.gif" WIDTH=16 HEIGHT=334 ALT=""

Das bewirkt das ihr in eurem Content auch reinschreiben könnt. Das Design wird sich, je mehr ihr schreibt, auch mit nach unten verschieben.

Links seht ihre wie es zum Schluß aussehen kann:

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

Hoffe ich habe damit einigen Anfängern helfen können. Viel Erfolg mit eurer Homepage.



<< Zurück



> Dieses Tutorial empfehlen

> Für dieses Tutorial Voten (nur eingeloggt)

> Anmerkung zu diesem Tutorial schreiben





spacer
spacer
spacer spacer



ein Wort alle Wörter

spacer

spacer



spacer

spacer


Welchen Browser benutzt Du?

IE
Firefox
Mozilla
Netscape
Opera
Safari
Andere

Alle Umfragen zeigen

spacer

spacer


Aktionen_Tutorials_Downloads_PixelPlow


Wir würden uns freuen wenn Du Pixelplow verlinken willst...
Füge dazu einfach folgenden HTML Code in Deine Homepage ein:




spacer

spacer




spacer

spacer

spacer
alle Inhalte (c) 2004 by Pixelplow! bzw. den Autoren Impressum | Druckversion
Seitenanfang

spacer