Trading-World.de
 
 

01 Home - Startseite

01.1. Das Layout

01.1.1. Layout Name

Dieses Design nennt sich "Trading-World". Nun, finden auch Sie Ihre weltweiten Handelspartner.

Oben rechts tragen Sie den Homepagenamen als einfachen Text ein. Also dort, wo jetzt "Trading World" steht. Keine Angst, das Textfeld passt sich automatisch auch bei längeren Namen an bzw. verkürzt sich bei sehr kurzen Namen. Hope you enjoy.

01.1.2. Layout Farben

Die Farben Dunkel-Rot, Weiss, Grau und Schwarz, welche wir für dieses Design verwendet haben, gelten im Zusammenspiel als sehr erfolgreiche Farben in den Print-Medien und auch beim Webdesign. Damit kann man nichts falsch machen, denn dieser Farb-Klassiker bleibt stets modern und gilt immer als angesagt.



01.2. Die Technik

Zur Konstruktion: Dies ist ein flexibles Layout, d.h. Sie können die Breite verändern. Also auch bildschirmfüllend, wenn Sie mögen. Die Breite der Gesamtkonstruktion beträgt zur Zeit 960 Pixel. Wählen Sie ggflls. einen anderen Pixelwert oder gar einen Prozentwert. Dies können Sie ganz oben in der Datei "format.css" einstellen. Übrigens: Auch der Rahmen, welcher die Vorlage umgibt, ist flexibel, denn dieser ist veränderbar in Breite und auch in Farbe, gerade das erweitert den Design-Spielraum. Im Moment ist dieser einfache Rahmen, welcher ohne Grafiken zustande kommt, 20 Pixel breit und in der Farbe Weiss. Setzen Sie diesen Rahmen doch mal auf Schwarz, das passt auch sehr gut. Wie in allen unseren Vorlagen sind Änderungen bezgl. Code-Änderung, eigene Grafiken einbauen usw. gestattet.

Seite ohne Frames. Anlegen von Links bzw. HTML-Seiten wie folgt: Die Datei Startdatei "index.html" ist zu kopieren und jeweils unter einem neuen Namen abzuspeichern.



01.3. Die Navigation

Jedem Link im Menü ist eine Zahl vorangestellt. Das wirkt professionell und ehrlich - man sieht so eine Anordnung mit Zahlen ja auch nicht so oft auf anderen Seiten. Ach ja, das linke Menü ist beliebig erweiterbar.

Zum oberen Menü: Ihre Links können Sie dort einfach hintereinander schreiben, denn die Links passen sich dort automatisch in der Länge an. Das Menü ansich ist wie folgt aufgebaut: Es ist zentriert, wobei der einzelne Link linksbünding ausgerichtet ist und nach rechts automatisch einen kleinen Abstand (padding-right) erhält, um sich von nebenstehenden Link abzugrenzen. Wir haben diese Gestaltung so gewählt, damit jeder Link dem vorangestellten schwarzem Quadrat und Strich zugeordnet ist.

Textlinks. Die Beispiel-Textlinks sind durch Ihre Links zu ersetzen.

Die allgemeinen Links (Links im Text) sehen zur Zeit aus wie nachstehend: Um den Mouseover-Effekt anzuschauen, fahren Sie mit der Maus über den Link: Beispiel-Link



01.4. Der Design-Trick

Wir möchten Ihnen einen kleinen Trick verraten, wenn Sie mögen:

Oben sehen Sie einen roten Bereich mit grafischer Wirkung, welcher nach oben und unten abgerundet ist. Trotzdem ist dieser Bereich in Höhe verstellbar bzw. auch verkürzbar, so dass Sie hier ggflls. auch mehr oder weniger Inhalt einfügen könnten. Wie funktioniert das? Nun, es ist folgendermaßen: Der Bereich besteht aus drei Teilen: Ein sich hineinwölbender Teil, ein Mittelteil (hier mit dem Homepagenamen, welcher innerhalb dieses Mittelteils unten sowie rechts angeordnet ist) und ein sich herauswölbender Teil. Dadurch ist der Mittelteil unabhängig und flexibel einzustellbar.

Übrigens haben wir das gleiche Prinzip mit dem roten Bereich unten in der Fusszeile (enthält im Mittelteil die Adresse) angewandt. Der Inhalt dieses Mittelteils, also hier die Adresse ist sowohl vertikal als auch horizontal zentriert angeordnet.
 
Mike Mustername GmbH & Co. KG  •  Beispielstraße 55  •  55234 Sampletown