Herstellung einer Website

 

Wie erstelle ich meine eigene Website? Am einfachsten ist es, wenn man sich eine Seite im Internet sucht und diese nachbaut. Den Quelltext dieser Seite kann man in der Regel im Browser nachverfolgen, aber oft ist dieser Quelltext nur sehr schwer zu verstehen. Deshalb wollen wir eine Seite mit den Kenntnissen erstellen, die im Unterricht erarbeitet wurden. (Für diejenigen, die keinen Informatikunterricht hatten, sei auf die entsprechenden Seiten dieser Homepage hingewiesen. Bei Problemen helfen im Internet Seiten wie selfhtml.org weiter.)

Als erste Vorlage dient uns die Seite "Island: feurige Insel im Eis". Aus Urheberrechtsgründen kann ich auf dieser Seite nicht die Orginaltexte und -Bilder verwenden. Stattdessen verwenden wir "Dummies". Bilder, die wir als Platzhalter benötigen, lassen sich im Internet generieren und herunterladen. Als Text eignet sich Blindtext, den man ebenfalls im Internet generieren und kopieren kann. (siehe Links oben rechts)

Von diesem Beispiel ausgehend entwickeln wir dann eine Vorlage, die durch entsprechende Änderungen individualisiert werden kann und für viele Zwecke eingesetzt werden kann.

Die Islandseite

Die Islandseite von "Planet Wissen" ist Teil einer sehr umfangreichen Website. Uns interessieren im Augenblick weniger die Sendungen, noch die Themen Natur, Technik usw., sondern nur der Aufbau der Seite. Wir haben einen festen Hintergrund, auf dem die Inhalte der Seite gescrollt werden können, links den Text mit Bildern, rechts Verweise zu weiteren Themen zu Island, im unteren Teil der linken Spalte  Verweise zu anderen Themen, die im weiteren Sinne mit Island zu tun haben. Unterhalb dieser Verweise gibt es noch die Möglichkeit die Darstellung der Spalten an die Breite des Bildschirms des Ausgabemediums anzupassen.

Was wollen wir übernehmen und was wollen wir anpassen? Unsere Seite soll eine Überschrift bekommen. Den Rest der Seite können wir vom Aufbau her übernehmen. Wir brauchen einen Kopfteil, eine Seitennavigation, einen Hauptteil mit Bildern, Texten und weiterführenden Links und einen Fußteil mit weiteren Links sowie die Links für Impressum usw.

Bevor wir uns mit dem Aussehen der Seite beschäftigen, legen wir ein Grundgerüst für den Inhalt festlegen. Dieses sieht wie folgt aus:

<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Island</title>
</head>
<body>
<header>
<h1>Island</h1>
</header>
<nav>
<ul>
<li><a href="">Seite 1 | mehr</a></li>
<li><a href="">Seite 2 | mehr</a></li>
<li><a href="">Seite 3 | mehr</a></li>
<li><a href="">Seite 4 | Bilder</a></li>
<li><a href="">Seite 5 | mehr</a></li>
<li><a href="">Seite 6 | mehr</a></li>
<li><a href="">Seite 7 | mehr</a></li>
</ul>
</nav>
<main>
<article>
<h2>Titel</h2>
<figure>
<img src="dummy-1134x756-WaterDrops.jpg" alt="Wassertropfen">
<figcaption>
Wassertropfen</figcaption>

</figure>
<h1>Haupttitel</h1>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. </p>
<ul>
<li><a href="#erstens">Wir gehen zu Abschnitt 1</a></li>
<li><a href="#zweitens">Abschnitt 2 ist auch interessant</a></li>
<li><a href="#drittens">Oder direkt zu Abschnitt 3</a></li>
<li><a href="#viertens">Abschnitt 4, last not least</a></li>
</ul>
<h1 id="erstens">Abschnitt 1</h1>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
<figure>
<img src="dummy-1134x756-SpiderWeb.jpg" alt="Spiderweb">
<figcaption>
Spinnennetz</figcaption>
</figure>
<h1 id="zweitens">Abschnitt 2</h1>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.
</p>
<figure>
<img src="dummy-1134x756-Coronet.jpg" alt="Coronet">
<figcaption>
Wasserkrone</figcaption>
</figure>
<h1 id="drittens">Abschnitt 3</h1>
<p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<figure>
<img src="dummy-1134x756-Dew.jpg" alt="Dew">
<figcaption>
Tropfen
</figcaption>
</figure>
<h1 id="viertens">Abschnitt 4</h1>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
<figure>
<img src="dummy-1134x756-Raindrops.jpg" alt="Raindrops">
<figcaption>
Regentropfen</figcaption>
</figure>
</article>
<aside>
<h3>WEITERFÜHRENDE INFOS</h3>
<div>
<a href=""><img src="../Bilder/dummy-160x107-Anemone.jpg" alt="Anemone">
Thema 1 | mehr</a>
</div>
<div>
<a href=""><img src="../Bilder/dummy-160x107-Auger2.jpg" alt="Auger">
Thema 2 | mehr</a>
</div>
<div>
<a href=""><img src="../Bilder/dummy-160x107-Butterfly.jpg" alt="Butterfly">
Thema 3 | mehr</a>
</div>
<div>
<a href=""><img src="../Bilder/dummy-160x107-Flamingo.jpg" alt="Flamingo">Thema 4 | mehr</a>
</div>
</aside>
</main>
<footer>
<p><a href="">Impressum</a>&nbsp;
<a href="">Kontakt</a>&nbsp;
<a href="">Datenschutzhinweis</a>&nbsp;
<a href="">Bildrechte</a>
</p>
<p>&copy; Donald Duck</p>
</footer>
</body>
</html>

Seite ansehen

Der Inhalt der Seite und damit das HTML-Gerüst ist fertig. Wie man sieht, ist die Seite bereits voll funktionstüchtig. Sie entspricht nur noch nicht vom Aussehen her unseren Erwartungen. Das Aussehen wird über eine CSS-Datei gesteuert. Um gezielt Zugriff auf Teile der Seite zu haben, werden noch Class-Attribute eingefügt. Bei HEADER wird class"header" eingefügt (<header class="header">), bei SECTION, ASIDE, MAIN, NAV und FOOTER erfolgen  die Angaben analog, also class="section" usw. Im Abschnitt <head></head> muss die folgende Befehlszeile ergänzt werden <link rel="stylesheet" href="basic.css">.

Die Seite besteht aus zwei Spalten. Diese belegen zusammen eine bestimmte Breite. Bietet der Bildschirm mehr Platz, werden sie zentriert dargestellt. Erreicht wird das durch den CSS-Befehl

.page-wrapper {
margin: 0 auto;
max-width: 80em;
}

Die Spalten selbst werden durch das Gridlayout definiert. Für die einzelnen Bereiche Header, Main usw. lauten die CSS-Anweisungen wie folgt:

.page-wrapper {
display: grid;
grid-template-columns: 3fr 1fr;
}

.header {
background-color: red;
grid-area: 1 / 1 / 2 / 3;
/* grid-area: row-start / column-start / row-end / column-end; */
}

.nav {
background-color: #fff;
grid-area: 2 / 2 / 3 / 3;
/* grid-area: row-start / column-start / row-end / column-end; */
}

.main {
background-color: #fff;
 grid-area: 2 / 1 / 4 / 2;
/* grid-area: row-start / column-start / row-end / column-end; */
}

.footer {
background-color:blue;
grid-area: 4 / 1 / 5 / 3;
/* grid-area: row-start / column-start / row-end / column-end; */
}

Die restlichen Daten der Datei basic.css können hier angesehen werden.

Seite ansehen

Etwas anders aufgebaut ist die Seite mit den Islandbildern. Im Orginal wird Java-Script für ein "Bilderkaroussel" verwendet. Da wir Script nicht nutzen wollen, benötigen wir eine andere Konstruktion. Eine Möglichkeit, die sicherlich noch nicht vollständig ausgebaut ist, findet man unter dem Link Bilder mit der dazugeörigen CSS-Datei basicisl.css.

Die Universalseite I ("Responsive Webdesign")

Auch die bereits besprochene Seite verfügt über Responsive Webdesign. An dem zweiten Beispiel soll noch einmal der allgemeine Aufbau einer Website besprochen werden bzw. die Vorgehensweise aufgezeigt werden, wie man eine Website erstellen könnte.

Welche inhaltlichen Bereiche soll die Webseite haben?

  • Header für Logo, Name, usw.
  • Navigationsleiste
  • Bereich für Inhalt (zweispaltig)
  • Footer für Impressum, Kontakt usw.
  • Ab einer bestimmten Breite sind links und rechts Ränder zu sehen.
  • Ab einer bestimmten Breite liegt die Navigationsleiste oberhalb des Inhaltsbereich, das Layout bleibt zweispaltig.
  • Bei weiterer Verkleinerung wird das Layout einspaltig.

Das folgende Listing zeit das Grundgerüst der Webseite. Im Hauptteil sind  Blindtext und Testbilder eingefügt.

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Webdesign</title>
<link rel="stylesheet" href="basics2.css">
<link rel="stylesheet" media="screen" href="monitor2.css">
</head>
<body>
<div class="page-wrapper">
<header class="header">
<h1>Header</h1>
</header>
<nav class="nav" >
<a href="#">Thema 1</a>
<a href="#">Thema 2</a>
<a href="#">Thema 3</a>
<a href="#">Thema 4</a>
<a href="#">Thema 5</a>
</nav>
<article class="art1">
<h2>Thema 1</h2>
<p>
<img alt="Fluor" src="158000.jpg"></p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et
quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores
eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius
modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam,
nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem
eum fugiat quo voluptas nulla pariatur?</p>

</article>

<article class="art2">

<h2>Thema 2</h2>
<p><img alt="Chlor" src="158100.jpg"></p>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi
sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis
est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis
voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae
sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis
doloribus asperiores repellat.</p></article>



<footer class="footer">
<h1>Footer</h1>
</footer>
</div>
</body>
</html>

Beispiel

Es werden zwei CSS-Dateien verwendet. Sie sind im Beispiel noch nicht eingebunden aber im Quelltext. Die Unterscheidung zwischen mobilen Geräten und Monitoren wird anhand der Auflösung des Bildschirms getroffen. Die sogenannten Breakpoints können individuell angepasst werden. Der Container "page-wrapper" wird für das Grid-Layout benötigt.

Die CSS-Datei basics.css enthält Einstellungen für Text- und Hintergrundfarben, für Textgrößen und Textabstände. Diese können natürlich beliebig verändert werden. Welche Bedeutung haben die Einstellungen?

@html {
font-size: 62.5%; /*1.0rem entspricht 10px*/
}

body {
font-size: 16px; /* Fallback für alte Browser, die rem nicht kennen */;
font-size: 1.6rem; /* 16px */;
line-height: 1.5; /* 24px */
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-weight: 300;
background-color: #efefef;
margin:0 auto;
padding:0;
background-color:gray;
max-width:80em;
}
img {
width:100%;
}
h1 {
color:#ddd;
font-weight:200;
padding-left:1rem;
}
h2{
font-weight:300;
color:#999;
padding-left:10%;
}
p {
font-weight:400;
color:#333;
padding-left:10%;
padding-right:10%;
}
a {
font-weight:300;
color:#333;
text-align:left;
padding:1rem;
text-decoration:none;
}
header {
background-color:#2e4105;
color:#fff;
}
footer{
background-color:#2e4105;
color:#fff;
}
article{
color: #000;
background-color: #ddd;
}
nav{
background-color:#d2d2d2;
}

Durch die Festlegung der font-size auf 62,5% im Wurzelbereich entspricht die Einheit 1 rem der Größe 10px. Da sich die Eigenschaften margin und padding oft auf die Schriftgröße beziehen, sind Angaben in rem, em oder % gegenüber absoluten Werten wie px durchaus sinnvoll. margin:0 auto sorgt dafür, dass der gesamte Inhalt mittig im Browserfenster dargestellt wird. Die Prozentangabe bei Bildern erlaubt es, dass sich diese genau dem verfügbaren Platz anpassen. Die restlichen Einstellungen bedürfen keiner weiteren Erklärung.

Die CSS-Datei Monitor steuert das Aussehen der Webseite in Abhängigkeit von der Bildschirmbreite. Die Werte  für die Breiten der Monitore können beliebig verändert bzw. um weitere Einstellungen ergänzt werden.

h1{
font-size:1.5em
}
h2{
font-size:1.2em;
}
p {
font-size:0.9em;
}
a {
font-size:1.1em;
}

@media screen and (min-width:80em){
.page-wrapper{
display:grid;
grid-template-columns: 1fr 2fr 2fr;
}
.header {
grid-area: 1 / 1 / 2 / 4;
/* grid-area: row-start / column-start / row-end / column-end; */
}
.nav a{
display:block;
border-bottom:1px solid #333;
}
.nav a:hover {
background:red;
}
.nav {
grid-area: 2 / 1 / 4 / 2;
/* grid-area: row-start / column-start / row-end / column-end; */
}
.art1 {
grid-area: 2 / 2 / 3 / 3;
/* grid-area: row-start / column-start / row-end / column-end; */
}
.art2 {
grid-area: 2 / 3 / 3 / 4;
/* grid-area: row-start / column-start / row-end / column-end; */
}
.art3 {
grid-area: 3 / 2 / 4 / 3;
/* grid-area: row-start / column-start / row-end / column-end; */
}
.art4 {
grid-area: 3 / 3 / 4 / 4;
/* grid-area: row-start / column-start / row-end / column-end; */
}
.footer{
grid-area: 4 / 1 / 5 / 4;
/* grid-area: row-start / column-start / row-end / column-end; */
}
}

@media screen and (min-width:36em) and (max-width:79.938em){
.page-wrapper{
display:grid;
grid-template-columns: 2fr 2fr;
}
.header {
grid-area: 1 / 1 / 2 / 3;
/* grid-area: row-start / column-start / row-end / column-end; */
}
.nav a{
display:inline-block;
border-right:1px solid #333;
float:left;
}
.nav a:hover {
background:red;
}
.nav {
grid-area: 2 / 1 / 3 / 3;
/* grid-area: row-start / column-start / row-end / column-end; */
}
.art1 {
grid-area: 3 / 1 / 4 / 2;
/* grid-area: row-start / column-start / row-end / column-end; */
}
.art2 {
grid-area: 3 / 2 / 4 / 3;
/* grid-area: row-start / column-start / row-end / column-end; */
}
.art3 {
grid-area: 4 / 1 / 5 / 2;
/* grid-area: row-start / column-start / row-end / column-end; */
}
.art4 {
grid-area: 4 / 2 / 5 / 3;
/* grid-area: row-start / column-start / row-end / column-end; */
}
.footer{
grid-area: 5 / 1 / 6 / 3;
/* grid-area: row-start / column-start / row-end / column-end; */
}
}

@media screen and (max-width:35.938em){
.page-wrapper{
display:grid;
grid-template-columns: 1fr;
}
.header {
grid-area: 1 / 1 / 2 / 2;
/* grid-area: row-start / column-start / row-end / column-end; */
}
a {
font-size:0.9em;
}
.nav a{
display:inline-block;
border-right:1px solid #333;
float:left;
}
.nav a:hover {
background:red;
}
.nav {
/* grid-area: row-start / column-start / row-end / column-end; */
}
.art1 {
grid-area: 3 / 1 / 4 / 2;
/* grid-area: row-start / column-start / row-end / column-end; */
}
.art2 {
grid-area: 4 / 1 / 5 / 2;
/* grid-area: row-start / column-start / row-end / column-end; */
}
.art3 {
grid-area: 5 / 1 / 6 / 2;
/* grid-area: row-start / column-start / row-end / column-end; */
}
.art4 {
grid-area: 6 / 1 / 7 / 2;
/* grid-area: row-start / column-start / row-end / column-end; */
}
.footer{
grid-area: 7 / 1 / 8 / 2;
/* grid-area: row-start / column-start / row-end / column-end; */
}
}

Die Universalseite II

"Erstellen Sie ein Seitenlayout, das eine Kopfzeile, ein Logo, drei Spalten und eine Fußzeile enthält." So oder ähnlich lauten Anleitungen zum Erstellen einer Webseite mit Hilfe von Editoren. Im folgenden Beispiel wird gezeigt, wie durch Abänderung der CSS-Datei die entsprechenden Anforderungen erfüllt werden können. In einem weiteren Beispiel wird ein Pulldown-Menü verwendet, dass nur CSS-Elemente beinhaltet.

Die bereits oben angeführte Html-Datei wird wie folgt ergänzt:

....
<div class="page-wrapper">
<div class="logo">
<img alt="Logo" src="dummy-800x533-White.jpg" height="100%">
</div>
<header class="header">
...


...
</article>

<article class="art3">
<h2>Thema 3</h2>
<p><img alt="Brom" src="158300.JPG"></p>
<p>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a,
venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus
elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac,
enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.</p>
</article>

<article class="art4">
<h2>Thema 4</h2>
<p><img alt="Iod" src="158400.JPG"></p>
<p>hasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue.
Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus,
sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id,
lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante.</p>
</article>
<section class="spalte1">
<hr>
<a href="#">Thema 1.1</a>
<a href="#">Thema 2.1</a>
<a href="#">Thema 3.1</a>
<a href="#">Thema 4.1</a>
<a href="#">Thema 5.1</a>
</section>
<section class="spalte2">
<hr>
<a href="#">Thema 1.2</a>
<a href="#">Thema 2.2</a>
<a href="#">Thema 3.2</a>
<a href="#">Thema 4.2</a>
<a href="#">Thema 5.2</a>
</section>
<section class="spalte3">
<hr>
<a href="#">Thema 1.3</a>
<a href="#">Thema 2.3</a>
<a href="#">Thema 3.3</a>
<a href="#">Thema 4.3</a>
<a href="#">Thema 5.3</a>
</section>
<footer class="footer">
...

Die CSS-Datei Monitor benutzt Grid-Areas. Für das Beispiel sieht diese Datei wie folgt aus:


h1{
font-size:1.5em
}
h2{
font-size:1.2em;
}
p {
font-size:0.9em;
}
a {
font-size:1.1em;
}
.logo{
grid-area:logo;
}
.header {grid-area:header;}
.nav {grid-area:nav;}
.footer {grid-area:footer;}
.art1 {grid-area:art1;}
.art2 {grid-area:art2;}
.art3 {grid-area:art3;}
.art4 {grid-area:art4;}
.spalte1{grid-area:spalte1;}
.spalte2{grid-area:spalte2;}
.spalte3{grid-area:spalte3;}

@media screen and (min-width:80em){
.page-wrapper{
display:grid;
grid-template-columns:1fr 1fr 1fr 1fr 1fr; /*Diese Zeile ist nixht unbedingt nötig*/
grid-template-areas:
'logo header header header header'
'nav art1 art2 art3 art4'
'nav spalte1 spalte2 spalte3 spalte3'
'footer footer footer footer footer'
}
.nav a{
display:block;
border-bottom:1px solid #333;
}
.nav a:hover {
background:red;
}
.spalte1 a{
display:block;
}
.spalte2 a{
display:block;
}
.spalte3 a{
display:block;
}
}

@media screen and (min-width:36em) and (max-width:79.938em){
.page-wrapper{
display:grid;
grid-template-columns:1fr 1fr 1fr 1fr; /*Diese Zeile ist nixht unbedingt nötig*/
grid-template-areas:
'logo header header header'
'nav nav nav nav'
'art1 art1 art2 art2'
'art3 art3 art4 art4'
'spalte1 spalte2 spalte3 spalte3'
'footer footer footer footer'
}
.nav a{
display:inline-block;
border-right:1px solid #333;
float:left;
}
.nav a:hover {
background:red;
}
.spalte1 a{
display:block;
}
.spalte2 a{
display:block;
}
.spalte3 a{
display:block;
}
}

@media screen and (max-width:35.938em){
.page-wrapper{
display:grid;
grid-template-columns:1fr; /*Diese Zeile ist nicht unbedingt nötig*/
grid-template-areas:
'header'
'nav'
'art1'
'art2'
'art3'
'art4'
'spalte1'
'spalte2'
'spalte3'
'footer'
}
.logo{
display:none;
}
a {
font-size:0.9em;
}
.nav a{
display:inline-block;
border-right:1px solid #333;
float:left;
}
.nav a:hover {
background:red;
}
.spalte1 a{
display:block;
}
.spalte2 a{
display:block;
}
.spalte3 a{
display:block;
}
}

Durch einfache Abänderungen der Grid-Area-Einstellungen kann das Aussehen der Datei leicht geändert werden. Es können Spalten hinzugefügt aber auch gelöscht werden. Da in der Html-Datei alle Abschnitte eine class-Eigenschaft haben, können diese durch die Anweisung display:none einfach ausgeblendet werden.

Der Campingplatz

Die Mosel