Webdesign - Wissenswertes, Tipps beim Erstellen einer Website

  1. Zum Inhalt springen

webdesign
klamonfra
Klaus Franz


Wissenswertes, Codeschnipsel, Tipps und Tricks für Webdesigner beim Erstellen Ihrer Website

Auf dieser Seite zeige ich ein paar Codeschnipsel für die Gestaltung einer Website die hier zum Tragen kamen. Diese Seite wird immer wieder erweitert sobald mir etwas Neues beim Programmieren auffällt. Und für den besseren Überblick werden die einzelnen Themen mit dem Erscheinungsdatum versehen.

Da die Beschreibungen zu dem Thema "Stilvolle Präsentation von Bildern und seinem Portfolio" oft sehr ausführlich ausgefallen sind, habe ich unter "Tutorials" eine eigene Seite ins Netz gestellt.


Webdesign

27Nov2015

Textauszeichnung für eine Abkürzung


Vorgehensweise bei einer Textauszeichnung für eine Abkürzung:

Das Element abbr zeichnet einen Teil eines Fließtextes als Abkürzung aus, und ist aus dem englischen "abbreviation" abgeleitet. Bei diesem Element handelt es sich um ein "inline-Element" und es erzeugt keinen Zeilenumbruch. Ein "Start-Tag" und ein "Ende-Tag" sind notwendig. Im "title-Attribut" wird die Abkürzung ausgeschrieben und der erklärende Text dem Anwender beim Überfahren der Textstelle mit der Maus als Tool-Tipp angezeigt.

» Artikel über die Textauszeichnungen weiterlesen
17Okt2015

Barrierefreiheit und Bedienungen mit der Tastatur


Die Bedienung mit der Tastatur ist ein wichtiges Kriterium, um eine Webseite zugänglicher zu gestalten. Gerade für mobile Endgeräte ist die Bedienung mit der Tastatur unumgänglich, da sie keine Maus zur Verfügung haben. Eine Hilfestellung bei der Bedienung einer Webseite ist dabei das Attribut tabindex.

» Artikel über die Bedienung mit der Tastatur weiterlesen
04Okt2015

Text verändert langsam seine Farbe wie bei einer Laufschrift


Eine Supportanfrage lautete: Wie kann man die Textfarbe beim Überfahren mit der Maus langsam von links nach rechts ändern?
Dazu sollte die Linie unter dem Text ebenfalls die Farbe ändern, allerdings von rechts nach links.

» Artikel über die Laufschrift weiterlesen
29Dez2014

Menü mit Garagentore.


Der Effekt mit einem "öffnenden Garagentor" hatte ich in der Fotogalerie vor ein paar Jahren mit JavaScript (objektorientierte Programmiersprache) realisiert, aber durch die CSS3 (Cascading Style Sheet)-Transitionen geht das nun auch viel einfacher. Wie ich die Technik der auffahrenden Garagentore realisiert habe möchte ich in diesem Artikel kurz aufzeigen.

» Artikel über die Garagentore weiterlesen
14Okt2014

Dreidimensionaler Effekt durch nach oben geknickte Ecken.


Gebogene Schlagschatten oder Schlagschatten, die eine nach oben geknickte Ecke simulieren, sind ein cooler Effekt auf einer Website. Dadurch heben sich Objekte oder Bilder von dem normalen Text hervor.

» Artikel über gebogene Schlagschatten weiterlesen
30Jul2014

Bilder und Bildunterschriften in HTML5 mit figure und figcaption auszeichnen.


Einem Bild kann man auf einfache Weise einen Text zuordnen. Hierfür benötigt man nur ein paar Zeilen HTML (HyperText Markup Language) in dem das Bild und der Text in einem eigenen "div-Container" mit der Klasse ".bild" gepackt wird.

» Artikel über figure und figcaption weiterlesen
08Apr2014

Breadcrumb Navigation als Navigationshilfe


Eine Brotkrümelnavigation (englisch: breadcrumb navigation) hilft hauptsächlich bei der Orientierung von tief verschachtelten Pfaden innerhalb einer Website. Solch eine Navigationshilfe zeigt dem Besucher die aktuelle Position in Bezug auf die übergeordneten Seiten und er kann darüber sehr schnell zur einer der höher gelegenen Ebenen/Seiten dieser Website wechseln.

» Artikel über die Breadcrumb Navigation weiterlesen
16Mär2014

Der Umgang mit externen Seitenaufrufe


Ein umstrittenes Thema bei der Gestaltung von Webseiten ist das Öffnen von externen Seiten in neuen Fenstern.
Das Gremium zur Standardisierung der Techniken rund um das Internet, das W3C (World Wide Web Consortium), empfiehlt, dass es jedem Benutzer freigestellt ist wie er mit dem Aufruf zu einer anderen Webseite umgeht.

» Artikel zum Umgang mit fremden Seitenaufrufen weiterlesen
12Mär2014

PIE rüstet den Internet Explorer mit der Fähigkeit aus, zahlreiche CSS3 Eigenschaften darzustellen.


Durch Schlagschatten, runde Ecken und Farbverläufen werden Webseiten durch einfache CSS3 (Cascading Style Sheet)-Anweisungen dekorativer gestaltet. Doch leider gibt es noch viele Besucher einer Website die sich mit älteren Browser im Internet tummeln und zu diesen, und häufig benutzten Browsern, gehört der Internet Explorer, der leider die CSS3 (Cascading Style Sheet)-Anweisungen nicht alle versteht.

» Artikel zum Thema PIE weiterlesen
02Mär2014

Die animierte Überschrift auf der Startseite mit einer ausgefallenen Schrift


Die Überschrift einer Startseite sollte ins Auge fallen und den Besucher dazu veranlassen sich auf der Website weiter umzusehen.
Hierfür habe ich mir eine besondere Schriftart ausgesucht und das Ganze noch ein wenig mit CSS3 (Cascading Style Sheet)-Mitteln animiert.

» Artikel über die animierte Überschrift weiterlesen
01Mär2014

Das animierte Dreieck im Titel der Seiten


Ein Standard bei Webseiten ist, dass ein Sprung zur Startseite über den Titel oder das Logo erfolgt. Mein Logo, das hellblaue Dreieck am Anfang einer jeden Seite, hatte ich am Anfang als Bild eingebunden.

» Artikel zum animierten Logo weiterlesen
26Feb2014

Der Button-Effekt im Menü dieser Website


Auch für die Darstellung der Tasten im Menü musste als Vorlage mein Radio herhalten. Für die Farbgebung habe ich mich an dem Farbverlauf im Kopf der Seiten gehalten und durch den wechselnden Farbverlauf, beim Überfahren eines Buttons mit dem Mauszeiger, den Eindruck einer gedrückten Taste erzeugt.

» Artikel über den Buttoneffekt weiterlesen
25Feb2014

Der Farbverlauf im Kopf der Seiten mit dem CSS Gradient


Mit der CSS3 (Cascading Style Sheet)-Eigenschaft background: gradient erzeugt man einen Farbverlauf ohne dass ein Hintergrundbild verwendet werden muss. Es gibt dabei zwei verschiedene Arten von Farbverläufen, den geraden Farbverlauf (linear) und den kreisförmigen Farbverlauf (radial).

» Artikel zum Thema Farbverlauf weiterlesen
23Feb2014

Das Datum wie ein Kalenderblatt darstellen


Damit der Besucher darüber informiert wird, zum Beispiel hier auf dieser Seite, wann es etwas Neues gibt, möchte ich das Datum der Erstellung in die Artikel mit einbinden. Und damit das auch vernünftig aussieht, habe ich mir überlegt die Datumsanzeige ähnlich einem Kalenderblatt darzustellen.

» Artikel zum Thema Datum wie ein Kalenderblatt weiterlesen
09Jan2016

Langsam an den Anfang einer Seite springen


Für die Besucher einer Website ist ein "Zurück-Button" sehr hilfreich um nicht nach dem Lesen eines Artikels wieder mühsam den Anfang einer Seite zu erreichen. Und durch eine Smooth-Scroll-Funktion kann der Bediener leicht verfolgen wohin die Reise nach dem Bedienen des Buttons geht.

» Artikel zur Smooth-Scroll-Funktion weiterlesen
08Feb2014

Die individuelle Tool-Tipp-Anzeige auf einer Website


Damit der Besucher zusätzliche Informationen zum Beispiel bei Abkürzungen oder Fremdwörter erhält ist ein Tool-Tipp sehr nützlich. So ein Tool-Tipp wird beim Überfahren eines Wortes mit dem Mauszeiger durch ein kleines Pop-up-Fenster angezeigt.

» Artikel über die individuelle Tool-Tipp-Anzeige weiterlesen
01Feb2014

Das aktuelle Änderungsdatum und der Copyright-Hinweis in der Fußzeile


Für einen Besucher ist es interessant zu wissen wann eine Webseite zum letzten Mal aktualisiert wurde. Dafür sollte man immer das letzte Änderungsdatum auf einer Webseite vermerken. Außerdem befindet sich in der Fußzeile auf jeder Seite der Copyright-Hinweis mit dem Jahres-Datum wann die Website gestartet ist und dem aktuellen Jahr.

» Artikel zum Copyright-Hinweis weiterlesen
31Jan2014

Scroll-Balken bei kurzen Seiten anzeigen


Es gibt Webseiten die sind so kurz, dass kein Scroll-Balken notwendig ist um den Inhalt darzustellen. Das ist aber beim Blättern von einer langen auf eine kurze Seite störend, da die neu aufgerufene Unterseite dann um die halbe Breite eines Scroll-Balken zur Seite springt.

» Artikel zum Scroll-Balken weiterlesen

Zum Seitenanfang springen Λ