Informationen

Template

Dieses Template heißt ' In The Office '. Auf jeder der verlinkten Seiten gibt es im oberen Bereich ein anderes Foto zu sehen. Das macht jeden Link sozusagen unverwechselbar und schafft gleichzeitig Struktur. Büro-Arbeit ist anstrengend, denn Konzentration, Stress und ständiges Nachdenken ist zum Teil ebenso energieverbrauchend wie körperliche Arbeit. Nicht umsonst wird ja auch 'Schach' zu den Sportarten gezählt. Im richtigem Team und mit einem durchdachtem Konzept macht Büro-Arbeit aber Spaß und fördert das Selbstbewußtsein.

Oberhalb jeder H2-Überschrift sehen sie eine Linie mit einem Font-Icon, hier eine Büroklammer. 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ü

Um das Menü zu öffen, klicken Sie bitte auf den sog. Hamburger Button (3 Striche, quer). Dieser Button ist ja mittlerweile als Menü-Symbol überall anerkannt. Hier ist das Besondere, das sich dieser Menü-Button nicht nur auf mobile,
sprich kleinere Bildschirmauflösungen bezieht, sondern auch auf alle anderen Auflösungen, z.b. Desktop-PC. Das macht es spannend und dient natürlich auch Design-Zwecken. Klicken Sie auf die Links im Menü (Primus bis Sextus) und Sie sehen wie die Seiten verlinkt sind und erfahren noch einige Informationen.

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. Lorem ipsum dolor sit amet, ad duo solet impedit, velit equidem ad ius, ne veritus vivendum sea. Has et adhuc nusquam intellegebat, eos cu inani tamquam legendos. His et elitr civibus quaerendum. Feugiat accusam vix at. Eu sed eros graecis suavitate, ad vix virtute iudicabit.

 

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) sowie auch im Fussbereich (Kontakt, Adresse, Links) auch mit dahinterliegendem Foto noch gut zu lesen ist, liegt über dem jeweiligen Foto 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.

Kontakt

  • Fa. Michael, Mustermann & Sohn
  • 12345 Frankenburg
  • Am schönen Großmarkt 18

©2025 | In The Office