Informationen

Template

Dieses Template heißt ' Start A New Creative Project '. Die Seiten 'Home' (diese Seite) sowie die Seiten beim Aufklapp-Menü, welche Sie bei 'Untermenü-A' und 'Untermenü-B' finden, sind bereits als Beispiel verlinkt. Bitte klicken Sie diese .

Oberhalb und unterhalb vom Homepagenamen sehen sie eine Linie mit Font-Icons, hier kleine Sternchen. Dieses Font-Icon können Sie auch durch ein beliebig anderes Font-Icon ersetzen, denn die Font-Icon-Schrift 'Font Awesome' ist ja bereits installiert. Dies geschieht alleine über die CSS-Datei format.css und die Änderungen dort gelten dann automatisch für alle HTML-Seiten.

Das Menü

Das Aufklapp-Menü ist responsive und nur per CSS erstellt. Es funktioniert ganz ohne Javascript und ist außerdem 'touch-friendly', d.h. es läuft auch auf mobilen Geräten. Hinweis dazu: Normalerweise wird die Aufklapp-Funktion ja per Mausberührung (hover) getätigt. Aber mobile Geräte kennen eben keine Maus sondern nur Touch. Unsere Lösung beruht auf der sog. 'Toggle-Funktion per Checkbox-Hack'.

Bei größeren Auflösungen wird das Aufklapp-Menü mit 6 Buttons, welche nebeneinander stehen und einen leichten Farbverlauf haben, dargestellt. Bei mobilen Auflösungen erscheint nur der sog. Hamburger Button (3 Striche, quer als Menü-Symbol). Um das Menü dort zu öffen, klicken Sie bitte auf diesen Button Aus den 6 Buttons wird bei mobilen Auflösungen ein sog. Akkordeon-Menü, welches sehr splatzsparend ist.



Vide quidam cotidieque ut vel. An illud iriure tamquam mea. Porro doming ex duo, mucius invenire eu his. Ne aliquando conclusionemque has. Quo te zril labore delicata, eos te debet elaboraret. Sit nonumy ornatus ut. Sea ea vero liber maluisset, pro deserunt pertinax ex. Vis noster liberavisse ad, et mei reque constituam. His melius commune an, in dolore persius sed, ferri apeirian eu est. Solet scripta aliquam te est, debet prompta ea has, facilis sapientem cu duo. Vel doming audiam accommodare ei, has agam tamquam ne, quem harum melius vel eu.

 

Responsive Webdesign

Responsive Webdesign

Responsive Webdesign (RWD) ermöglicht eine Anpassung bzw. Optimierung der unterschiedlichen Bildschirmgrößen von Smartphone, Tablet, Notebook, Laptop und Desktop-PC innerhalb einer einzigen Webseite. Dazu werden per CSS-Media Queries die verschiedenen Bildschirmgrössen abgefragt. Somit kann man auch auf das Hoch- oder Querformat eines mobilen Gerätes reagieren. Außerdem wird beim Layout verstärkt mit Angaben in Prozent gearbeitet.

So testen Sie

Hier auf der Seite index1.html (Primus) nennen wir Ihnen gute Möglichkeiten ein Responsive-Layout in verschiedenen Auflösungen zu testen, denn nicht jeder hat ja diverse Smartphones und Tablets zu Hause. Diese Responsive-Vorlage verwendet keinerlei Javascript.

Vide quidam cotidieque ut vel. An illud iriure tamquam mea. Porro doming ex duo, mucius invenire eu his. Ne aliquando conclusionemque has. Quo te zril labore delicata, eos te debet elaboraret. Sit nonumy ornatus ut. Sea ea vero liber maluisset, pro deserunt pertinax ex. Vis noster liberavisse ad, et mei reque constituam. His melius commune an, in dolore persius sed, ferri apeirian eu est. Solet scripta aliquam te est, debet prompta ea has, facilis sapientem cu duo. Vel doming audiam accommodare ei, has agam tamquam ne, quem harum melius vel eu.

 

Die Technik

Einbau der Bilder

Bei den Fotos im Inhaltsbereich haben wir uns für die CSS-Technik 'float' entschieden.

Hierfür haben wir drei Beispiele angelegt. Einmal ist das Bild links platziert und der Text fließt rechts herum, ein anderes Mal ist das Bild rechts platziert und der Text fließt links herum. Als drittes steht dann ein Bild mittig ohne Textfluß. Wir beschreiben es Ihnen hier in einem Tutorial auf der Seite 'Quartus' (index4.html)

Die Transparenz

Genau genommen muss man hier von einer Teil-Transparenz sprechen. Damit Text im Kopfbereich (hier der Homepagename) auch mit dahinterliegendem Foto noch gut zu lesen ist, liegt auf dem Homepagenamen-Feld noch ein Transparenz-Filter. Per CSS-rgba. D.h. es können auch Farbe der Transparenz sowie auch der Deckungsgrad verändert werden. Dies nur zur Info, falls Sie Ihre eigenen Fotos einsetzen wollen.

Beim 'rgba-Befehl' können Sie Farbe und Deckungsgrad auch anders einstellen (mit Werten von 0 bis 1, wobei gilt: 0=volltransparent und 1= gar keine Transparenz). Dazwischen gelten die eigentlich interessanten Werte von 0.1 bis 0.9. Ein Beispiel für die Deckungskraft von 70% ist der Wert 0.7, d.h. das ein Objekt zu 30% transparent ist. Ein Beispiel für die Deckungskraft von 20% ist der Wert 0.2, d.h. das ein Objekt zu 80% transparent ist.