Fotowebseiten laufen fast immer auf Flash. Die zunehmend notorische Technologie von Adobe ist einfach ein hervorragender Job, um Bilder auf dynamische Weise darzustellen, die perfekt für Fotografie-Vitrinen geeignet ist. Es gibt jedoch einige Nachteile.
Erstens ist es nicht immer leicht, eine hochwertige kostenlose Diashowvorlage zu finden, von der aus begonnen werden kann. Wenn Sie kein Flash-Entwickler sind, kann dies zu erheblichen Kosten führen. Zweitens ist die Welt derzeit in einer sehr engen Beziehung zwischen Liebe und Hass, und viele Entwickler wechseln nach Möglichkeit zu JavaScript, CSS3 und HTML5.
Heute bauen wir eine schöne, Javascript-gestützte Fotoseite mit einer Diashow im Vollbildmodus. Im wahrsten Sinne des Wortes wird das schwere Heben von einer großartigen kostenlosen jQuery-Ressource ausgeführt, so dass unsere Arbeit meistens anpassbar ist. Lass uns anfangen!
Was wir bauen
Es ist immer gut zu sehen, wohin Sie gehen, bevor Sie dort ankommen. Klicken Sie auf den Link unten, um eine Live-Demo der Seite anzuzeigen, die wir heute erstellen werden.
Klicken Sie für eine Live-Demo
Erste Schritte: Das perfekte Plugin finden
Das Tolle an der Arbeit mit jQuery ist die immense Menge an freien Ressourcen, mit denen Sie arbeiten müssen. Andere Entwickler haben sich schon lange mit Ihnen beschäftigt und stundenlang Qualitäts-Plugins erstellt, die Sie völlig kostenlos verwenden können.
Wir haben uns früher mit der Idee eines Vollbild-Hintergrunds zu Design Shack befasst, aber das Plugin, das wir verwendeten, hatte keine Diashow-Funktion, so dass wir uns mit einem statischen Bild befanden. Fotografie-Websites möchten häufig so viel wie möglich von ihrer Arbeit zeigen, und nichts macht einen starken Eindruck wie eine riesige Diashow, die das Browserfenster ausfüllt.
Nach nicht allzu langer Suche stieß ich auf ein einfach fantastisches Plugin von BuildInternet mit dem Namen Supersized. Vielleicht haben Sie dieses Plugin im Freebie-Überblick dieser Woche bemerkt.
Wenn Sie folgen möchten, laden Sie dieses Plugin herunter und duplizieren Sie die Datei "Default.html". Datei befindet sich im Inneren. Es sind einige Beispiel-HTML-Dateien enthalten, die den besten Ausgangspunkt für unser Projekt bieten.
Als nächstes öffnen Sie diese Datei in Ihrem Browser, um ein Gefühl dafür zu bekommen, womit wir arbeiten müssen. Wie Sie sehen, gibt es bereits eine großartige Diashow im Vollbildmodus und einige wirklich nette Steuerelemente unten.
Ich liebe diese Kontrollen wirklich, aber um Ihnen zu zeigen, dass Sie nicht in diesem Design stecken, werden wir diese ausrangieren und die Diaschau unabhängig laufen lassen. Wir werden später auf die Auswirkungen auf die Verwendbarkeit eingehen. Lassen Sie uns zunächst das Plugin beiseite legen und einige Folien entwerfen.
Dia-Design
Das Layout unserer einfachen Homepage wird fast vollständig von unserer Foto-Diashow übernommen. Wenn Sie gute Fotografie zum Arbeiten haben, kann Ihre Arbeit als Designer erheblich einfacher werden, da Sie nur diese Bilder richtig einsetzen müssen.
Um es einfach zu machen, fügen wir die kleine Nachricht in die Folien ein. Es wird kein Live-Text sein, also leidet SEO definitiv ein bisschen, so dass Sie den eigentlichen Text einbauen und über die Folien legen können, wenn Sie der Meinung sind, dass dies ein Hauptproblem ist. Im Grunde würden Sie einfach ein absolut positioniertes Div erstellen, es mit etwas Text füllen und sicherstellen, dass es sich von Ihren Hintergrundbildern abhebt. Wir werden diesen Vorgang später mit unserem Navigationsmenü in Aktion sehen.
Zu Beginn erstellen wir die Inhaltsfolien. Diese dienen lediglich der Einführung in die Website und enthalten nicht wirklich Informationen, die Sie auf der Seite "Info" nicht in einem benutzerfreundlicheren Format finden könnten. Diese Folien werden zwischen den Fotodias verteilt und helfen, den Inhalt ein wenig aufzubrechen.
Erstellen Sie in Photoshop ein neues Dokument mit 1200 x 800 x 800 Pixeln und füllen Sie es mit # 0e1120. Wenden Sie als Nächstes einen wirklich schweren inneren Schatten an, um ihm ein schönes vignettiertes Gefühl wie im Bild unten zu geben.
Füllen Sie nun diese Folie mit Text und Logo, um die Site vorzustellen. In der Folie unten habe ich eine einfache Begrüßungsnachricht erstellt. Für den kleineren Typ habe ich Trajan verwendet (Klischee aber effektiv) und für das Logo eine freie Schriftart namens Angelic War. Sie können diese Schriftart bei DaFont.com herunterladen.
Beachten Sie, dass ich dem Logo einen leichten äußeren Schein verleiht. Dies hilft, sich vom Rest des Textes abzuheben und erzeugt einen schönen Effekt auf dem dunklen Hintergrund.
Als Nächstes habe ich dieses Design zweimal kopiert und alternative Folien auf diese Folien gelegt, in denen die anderen Dienste des Fotografieunternehmens besprochen wurden. Der Text folgt genau der Formatierung der ersten Folie. Wiederholung ist ein einfacher und sehr wichtiger Aspekt des Designs, und Sie sollten immer nach Wegen suchen, sie umzusetzen.
Fotos auswählen
Für den Rest der Folien wollen wir natürlich etwas fotografieren. Nach der ersten Einführung (Begrüßung / Hochzeit) legen wir einige Hochzeitsfotos ab. Nach der zweiten Intro-Folie (Verlobung) legen wir einige Fotos von glücklichen Paaren ab und nach der dritten Intro-Folie (Familie / Senior) legen wir einige Familienfotos ab.
Unser Fotogeschäft ist fiktiv, aber ich bin zufällig Fotograf, also hole ich mir ein paar Bilder aus meinem eigenen Portfolio, um dieses Projekt zu füllen. Ich habe die folgenden sechs Bilder ausgewählt und jedes in der gleichen Größe gespeichert wie unsere Einführungsfolien.
Verschrottung der Diashow-Steuerelemente
Wenn Sie die Diaschau nun völlig autonom machen, könnte die Usability-Polizei ein bisschen ausflippen. Wenn Sie nicht einverstanden sind, lassen Sie die Steuerelemente einfach dort! Wenn Sie sich tiefer in die Website einfinden, auf der sich die einzelnen Projekt-Diashows befinden würden, würde ich definitiv Kontrollen vornehmen, damit Kunden und potenzielle Kunden problemlos hin und her gehen und bestimmte Bilder auswählen können.Auf der Startseite möchte ich jedoch nur eine nette und einfache Bildlaufnachricht, die sich ohne jegliche Benutzerinteraktion wiederholt.
Um dies zu erreichen, gehen Sie in die Defautl.html-Datei und kommentieren oder löschen Sie alles, was sich unterhalb des übergroßen Bereichs befindet. div und über dem schließenden Body-Tag. Der folgende Code sollte alles sein, was sich in Ihrem Körper befindet.
Eigene Folien einfügen
Scrollen Sie nun zum oberen Teil der HTML-Seite, wo sich alle Skript-Tags befinden. Hier finden Sie die Steuerelemente für die Diashow. Die Liste der Folien sollte leicht zu erkennen sein. Beachten Sie, dass die aktuellen Folien Titel, Links usw. haben. Wir möchten nicht, dass unser Bild irgendwo verlinkt wird, und wir haben die untere Leiste mit dem Titel verworfen, sodass wir diesen Abschnitt drastisch vereinfachen und unsere Folien wie folgt auflisten können:
Beachten Sie, dass ich die Startbreite eingestellt habe. und? startheight? auf die Größe unserer Folien. Ich habe auch das? Slide_interval? bis 6000. Dies verlangsamt die Diaschau etwas von der Standardeinstellung. Sie können den Rest dieser Einstellungen dort belassen, wo sie sind. Stellen Sie einfach sicher, dass Ihre Folien unten aufgeführt sind und sich Ihre Folien-JPGs im Folienordner befinden.
Navigation HTML
Jetzt sollte Ihre Diashow mit Ihren eigenen benutzerdefinierten Folien ausgeführt werden. Es ist jedoch keine Homepage, bis Sie den Rest des Inhalts finden können. Zum Abschluss unserer Website erstellen wir ein einfaches Navigationsmenü und platzieren es am unteren Rand der Seite, wo sich die Steuerelemente der Diashow befanden.
Der HTML-Code hier ist super einfach, wirf einfach eine ungeordnete Liste unter die "Lade" -Seite. div in deinem Körper.
Navigation CSS
Jetzt möchten wir dies als Balken am unteren Rand gestalten. Glücklicherweise gab es am unteren Rand bereits eine Leiste, als wir das Plugin zum ersten Mal heruntergeladen haben, sodass wir etwas von diesem Stil stehlen und für unsere eigenen Zwecke anpassen können. Unten habe ich den Balken 40px hoch gemacht und seine Farbe mit RGBa eingestellt, damit ich etwas Transparenz habe.
Als Nächstes müssen wir viel Stil auf verschiedene Teile der ungeordneten Liste anwenden. Wir müssen die Liste selbst formatieren, die Listenelemente so verschieben, dass sie inline erscheinen, und die Link / Hover-Farben definieren.
Für meinen letzten Trick möchte ich das erste Element in der Liste etwas anders gestalten. Dies dient als ständige Kennung der Website und als Link zur Startseite. Indem ich das erste untergeordnete Element der Liste stile, kann ich diesem Element andere Ränder und eine andere Art von Behandlung geben, um es von den anderen zu unterscheiden.
Sie können den Effekt davon im Bild unten sehen. Der Artikel hat immer noch den gleichen Grundzweck wie alles andere in der Liste. Er wird lediglich einer besonderen visuellen Behandlung unterzogen, da er auch der Name der Website ist.
Fazit
Damit sind wir alle fertig. Von hier aus würden Sie den Rest der Seiten entsprechend dem Design, das Sie auf der Startseite eingerichtet haben, herauscodieren. Stellen Sie sicher, dass Sie bei der Demo vorbeischauen, um sie in Aktion zu sehen.
Hinterlasse einen Kommentar und lass uns wissen, wie du meine Arbeit verbessern könntest. Ich würde gerne hören, was du ändern würdest und was deiner Meinung nach gleich bleiben sollte. Danke fürs Lesen!