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>
<a
href="">Kontakt</a>
<a
href="">Datenschutzhinweis</a>
<a
href="">Bildrechte</a>
</p>
<p>© Donald Duck</p>
</footer>
</body>
</html>
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.
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>
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