wir haben ein Stylesheet vorbereitet unter https://github.com/webmapping24s/nz/blob/main/main.css
über “Raw” kann der Code kopiert werden
in nz/index.html im <head> Bereich ein <link> Element erzeugen und als href main.css eintragen
<link rel="stylesheet" href="main.css">
STRG+Klick auf main.css ermöglicht uns, main.css an der richtigen Stelle zu erstellen
dann den Inhalt unserer Vorlage dorthin kopieren, speichern und eure Seite sollte anders aussehen ;-)
COMMIT main.css: https://github.com/webmapping24s/nz/commit/2ae77c4b403c984610e85c9500d824bfeda0efe0
COMMIT <link>: https://github.com/webmapping24s/nz/commit/a9114b62c3c645dcca6dfbf5fbb606863666f355
Vorgaben und Fragen sind hier: https://webmapping24s.github.io/nz/quiz
COMMIT: https://github.com/webmapping24s/nz/commit/c2f09c8aa55ca9c894ae565e0231ae08f6c40ef5
TIPP: die Links zu den Fragen zeigen, wie man direkt auf Codezeilen bei github.com verweisen kann - für die Dokumentation eurer Projekte kann das später hilfreich sein
TIPP: mit der rechten Maustaste (oder länger drücken unter MAC) kann man Elemente der Seite im Browser “Untersuchen” und dabei unter anderem nicht nur den HTML Quellcode sondern auch die angewandten CSS-Regeln ein-/ausschalten bzw. verändern - das hilft beim Testen, was die einzelnen Attribute bewirken …
Fragen und Antworten
was bewirkt die CSS Regel in Zeile 5-10?
body {
font-family: 'Open Sans', sans-serif;
background-color: #ffffff;
max-width: 1280px;
margin: auto;
}
wozu wird das Größer-als-Zeichen (>) in Zeile 12 verwendet?
header>img {
max-width: 100%;
}
was passiert in der CSS Regel in Zeile 16-21?
header a img {
border-radius: 50%;
display: block;
margin: auto;
margin-top: -50px;
}
was passiert in der CSS Regel in Zeile 23-30?
main {
max-width: 1024px;
margin: auto;
margin-top: -50px;
border-left: 1px dashed gray;
border-right: 1px dashed gray;
border-bottom: 1px dashed gray;
}
| der Hauptbereich wird mit max-width auf die maximale Brei 1024px gesetzt, über margin: auto wieder zentriert und mit margin-top: -50px um 50px nach oben geschoben - damit ist der Abstand zum User-Bild nicht so groß. Rechts, Links und Unten wird mit border-[left | right | bottom] ein gestrichelter Rand in grau mit 1px Breite gezeichnet (1px dashed gray) |
was bewirkt “padding” in Zeile 33?
article {
padding: 1em;
}
wo werden die Fonts Roboto und Montserrat in Zeile 37 & Zeile 45 definiert?
die beiden Fonts werden in der dritten Zeile bei @import definiert und binden Webfonts ein, die uns Google-Fonts bereitstellt. Mehr dazu bei der nächsten Frage
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300&family=Open+Sans:ital@0;1&family=Roboto:wght@300&display=swap');
findet die Quelle aller verwendeten Fonts im Internet
main.css übertragen werden.warum steht eine Raute (#) vor “map” in Zeile 52?
#map {
width: 90%;
height: 600px;
border: 1px solid silver;
margin: auto;
}
nz/index.html noch nicht gibt ;-) Wir werden es später hinzufügen …wofür stehen die vier Werte bei padding in Zeile 61?
footer {
text-align: center;
padding: 1em 2em 3em 2em;
}
was bewirkt die CSS Regel in Zeile 64-67?
footer nav {
display: grid;
grid-template-columns: 40% 20% 40%;
}
welche Elemente werden mit dem Schatten in Zeile 76-78 angesprochen?
header img,
figure>img,
#map {
box-shadow:
0 4px 8px 0 rgba(0, 0, 0, 0.2),
0 6px 20px 0 rgba(0, 0, 0, 0.2);
}
was bewirkt die @media Regel in Zeile 81-90? Könnt ihr sie im Browser reproduzieren?
@media screen and (max-width: 1280px) {
main {
border: none;
}
figure {
margin-left: 0;
width: 100%;
}
}
Font Awesome (https://fontawesome.com/) ist eine Icon-Bibliothek mit Hunderten von Webicons die wir in unseren Applikationen verwenden können. Um sie zu verwenden, müssen wir das Stylesheet der Bibliothek verlinken und können dann über Klassenattribute bei <i>-Elementen die einzelnen Icons einbauen.
der Einbau des Stylesheets im <head>-Bereich von index.html erfolgt über ein sogenanntes CDN (Content delivery network). Es gibt viele solche CDNs, wir verwenden https://cdnjs.com
die Suche dort nach font-awesome bringt uns zu https://cdnjs.com/libraries/font-awesome
wir kopieren den Link-Tag (das mittlere der beiden Icons) von all.min.css und bauen ihn im <head>-Bereich von index.html ein - was bedeuten die einzelnen Attribute?
COMMIT: https://github.com/webmapping24s/nz/commit/69b5c22f2c4671a7ad15074bcc7bfbbce8874517
die Icons finden wir unter https://fontawesome.com/icons
die Suche nach camera bringt uns ein camera-retro-Icon, dessen Code zum Einbauen wir direkt kopieren und an der passenden Stelle der HTML-Seite einsetzen können. Dasselbe machen wir mit Pfeilen für die Navigation und einem Home-Symbol für die eigene Etappe
ACHTUNG: nur die freien Icons verwenden (über den Blitz bei der Suche filtern) - die PRO-Icons werden nicht angezeigt
COMMIT: https://github.com/webmapping24s/nz/commit/971ea6d1de8a700925c7bf4bb84ce8cee0c5c10b
Der Ausflug zu CSS ist vorläufig beendet, wir widmen uns jetzt der Karte, die im Neuseelandreise Beispiel noch fehlt
zuerst erstellen wir eine leer main.js Datei
wir binden main.js und die Leaflet Bibliothek im <head> Bereich von index.html ein - den Code für Leaflet kopieren wir vom top-Beispiel
Achtung: wir benötigen sowohl leaflet.css als auch leaflet.js
COMMIT: https://github.com/webmapping24s/nz/commit/9bebcb2d3c8812aab16809d127b5d28061d662dd
wir erstellen den Karten-DIV mit einer Überschrift - die Kartenfläche wird unmittelbar danach angezeigt …
wir kopieren den Javascript Code des top-Beispiels nach main.js
ACHTUNG: nur den Code zwischen <script> und </script> kopieren, <script> selber nicht, denn das ist HTML-Syntax und würde im Javascript sofort zu einer Fehlermeldung führen
COMMIT: https://github.com/webmapping24s/nz/commit/b705ebe6fba614c54a71ac4c3c061d8876314b39
HMMM: leider wird die Karte nicht angezeigt :-( Warum?
unser Script main.js wird im <head> Bereich eingebaut und der Browser führt das Skript aus, sobald er es findet. Leider ist zu diesem Zeitpunkt aber der DIV für die Karte noch nicht “bekannt” und deshalb bekommen wir eine Fehlermeldung im Browser: mit F12 können wir im Tab “Konsole” den Fehler sehen: Uncaught Error: Map container not found und noch einige Details dazu.
!!!WICHTIG: die Fehlerkonsole ist die erste und wohl wichtigste Anlaufstelle beim Suchen von Fehlern wenn wir mit Javascript/Leaflet programmieren - schaut immer dort hinein, denn oft steht die Lösung des Problems direkt dort.
in unserem Fall erfahren wir, dass der Map container nicht gefunden wird und mit eine Zusatzattribut beim <script> können wir das beheben: “defer” ist das Zauberwort und bewirkt, dass die Ausführung des Skripts auf den Zeitpunkt “verschoben” wird, an dem der gesamte Inhalt der Seite vom Browser gelesen wurde. Damit ist dann auch der DIV der Karte verfügbar und die Karte kann gezeichnet werden
<script defer src="main.js"></script>
bleibt noch die Koordinaten der Etappe mit Hilfe der Wikipedia-Seite zu korrigieren
die Karte ist damit fertig und eine Fehlermeldung steht noch in der Konsole - scheinbar fehlt da noch ein favicon.ico - angezeigt wird dieses Icon im Browser beim Tab - wir verwenden unser User-Bild dafür und bauen es im <head> Bereich als link rel=”shortcut icon” ein
<link rel="shortcut icon" href="images/user.jpg" type="image/x-icon">
das war’s für heute …