| Home | | | Rubriken | | | Blog | | | Archiv | | | Support |
Online Prospekte
Weniger Papier gleich weniger Müll
Alle bekannten Prospekte, welche wir wöchentlich oder halbwöchentlich in unserem Briefkasten bzw. in den Kleinanzeigenblättern vorfinden, liegen auch in digitalisierter Form im Internet vor. Was liegt also näher, als diese Prospekte online durchzustöbern um auf aktuelle Schnäppchenjagd zu gehen? Das hat viele praktische Vorteile, insbesondere aber schützen Sie damit die Umwelt, denn Sie sparen Papier. Weniger Papier bedeutet weniger Müll.Besonderheiten der Online-Prospekte
Im Vergleich zu den normalen Prospekten bieten Online-Prospekte einen erheblichen Mehrwert. Dank einiger Suchoptionen je nach Anbieter können Sie nicht nur Prospekte einsehen, sondern auch Preisvergleiche anstellen oder auch gezielt nach Kategorien suchen (z. B. Discounter, Baumärkte, Elektromärkte, einzelne Lebensmittel, Top-Angebote usw.)Besonders erwähnenswert ist auch die Verlinkung zur Google-Map, welche eine Kartenansicht ermöglicht. So läßt sich nicht nur der Standort des Einkaufmarktes lokalisieren, auch Filialen oder Alternativen können angezeigt werden. Manch einer entdeckt auf diese Weise in seiner Nachbarschaft z. B. einen Drogeriemarkt oder einen Fast-Food-Imbiss, welcher ihm bis dahin noch gar nicht bekannt war.
Kontakt
Hier eine kleine Auswahl einiger Anbieter von Online-Prospekten:Beschreibung: Online-Prospekte
Die Anbieter von Online-Prospekten konzentrieren sich auf ganz Deutschland. Man gibt in einem Suchfeld den Namen der eigenen Stadt an. Bei einigen Webseiten wird man praktischerweise bereits ohne Angabe des Städtenamens automatisch anhand der IP-Adresse weitergeleitet. Wie schon gesagt kann man je nach Webseite gezielt suchen. Nicht nur nach Prospekten, das ist klar, aber auch nach bestimmten Discountern, Produkten oder Branchen. Schön finde ich, daß neben der Adresse des jeweiligen Marktes auch die Öffnungszeiten und die Entfernungen angezeigt werden. Die Prospekte lassen sich per Klick leicht durchblättern, es werden Doppelseiten gezeigt, oftmals auch schon ein Vorschaubild der nächsten Seite, die Prospekte lassen sich ggflls. auch ausdrucken und daß man die Prospekte vergrößern kann ist ja schon fast selbstverständlich.Das Layout
Dieses Design heisst: Einkaufstipps!Bei diesem Layout haben wir mal statt "Dead Text" (sprich beliebiger Beispieltext) einen kleinen Artikel über Online-Prospekte geschrieben. Wir hoffen, es hat Ihnen gefallen. Dieser gesamte Text darf natürlich gelöscht bzw. angepasst werden, denn wie in allen unseren Vorlagen dient der Text im Inhaltsfeld ja für Sie -wie gerade erwähnt- nur als Beispieltext. Sie sollen damit sehen, wie wir die Überschriften, die Abstände der Absätze, die Schriftgröße, die Zeilenabstände im Text o.ä. eingestellt haben. Gleiches gilt auch für den Bereich ganz oben links, denn der Block oben (Layout, Artikel, Autor), ist gemäß Ihrer Kreativität zu verändern oder aber auch nicht.
Die Technik
Flexibles Layout:Die Breite der Inhaltfeldes stellen Sie in der Datei "format.css" ein, dort bei "#breite". Im Moment steht die Breite des Inhaltsfeldes auf 550 Pixel. Wählen Sie ggflls. einen anderen Pixelwert oder gar einen Prozentwert.
Auch die Breite des oberen Bereiches mit der dunklen Balkengrafik ist einstellbar. Dort steht die Breite z. Zt. auf 100%. Das macht Sinn und ich würde es so beibehalten.
Anlegen von Links bzw. HTML-Seiten:
Die Datei Startdatei "index.html" ist zu kopieren und jeweils unter einem neuen Namen abzuspeichern.
Info zu den verwendeten Grafiken:
Dieses in der Breite veränderbare Design besteht aus 3 Grafiken:
- Die Hintergrund-Grafik: "back.jpg"
- Die Hintergrund-Grafik des Inhaltfeldes: "back2.jpg"
- Die dunkle Grafik ganz oben mit Kachelung nach rechts: "top1.png"
Im Inhaltsfeld tummelt sich dann noch als Aufzählungspunkt (hier als Beispiel unter Kontakt) die Grafik "bullet.png".
Ihr Name prägt sich ein:
Der Homepagename (hier: Einkaufstipps!) bleibt ständig sichtbar, auch wenn das Inhaltsfeld scrollt. Der Homepagename ist Bestandteil der Hintergrundgrafik ("back.jpg"). Wir haben deshalb eine zweite Hintergrundgrafik "back_master.jpg" für Sie anbei, welche Sie im Grafikprogramm beschriften und danach als neue "back.jpg" abspeichern müssen.
Transparenz bleibt erhalten:
Sie könnten auch eine ganz eigene Hintergrundgrafik (statt:"back.jpg)" entwerfen, der Schlagschatten der oberen dunkelgrauen Grafik ("top.png") würde erhalten bleiben. Denn dies ist ja ein Vorteil von PNG-Grafiken. Auch wenn Sie im Inhaltsbereich die Hintergrund-Grafik ("back2.jpg") oder die Hintergrundfarbe ändern, bleibt die Transparenz der Listen-Grafiken ("bullet.png") bestehen.
Für den Brower Internet-Explorer in der Version 6, welcher noch keine transparenten PNG darstellen kann, erfolgt die Transparenz über den nachfolgend genannten CSS-Filter, der über eine Browserweiche aktiviert wird.
filter: progid:DXImageTransform.Microsoft. AlphaImageLoader(src='images/top1.png', sizingMethod='scale');Fazit:
Der "AlphaImageLoader-Filter" läßt auch PNG-Grafiken im Browser Internet-Explorer in der Version 6 transparent erscheinen. Alle anderen Versionen des Internet-Explorers ab Version 7 sowie auch alle anderen Browser wie z. B. "Firefox" können sowieso transparente PNG-Grafiken darstellen.
Testen mit Hilfe
Wie testet man das Aussehen in den verschiedenen Versionen des Internet-Exlorers? Es gibt dazu ein kostenloses Programm namens "IEtester". Dort sehen Sie auf einem Blick das Aussehen der Webseite in den unterschiedlichen Versionen. Mit nur einem Klick schalten Sie zwischen den verschiedenen Versionen um.
Die Navigation
Textlinks. Die Beispiel-Textlinks sind durch Ihre Links zu ersetzen. Menü oben und Menü ganz unten sind um einige Links erweiterbar. Je nach eingestellter Gesamtbreite der Seite.Die Menüs auf der linken Seite sind beliebig erweiterbar. Bei mehr Links erweitern sich die Menü-Boxen automatisch nach unten.
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