# Detailseiten
Bisher hast du eine index.html und eine style.css-Datei erstellt. Browser erkennen eine index.html immer automatisch und führen diese aus. Würde die Homepage (Startseite) deiner Website home.html heissen, müsstest du diesen Dateinamen in der Adresszeile hinzufügen.
<!-- Die index.html-Datei errreichst du so… -->
superwebsite.ch/index.html
<!-- …als auch über folgende URL (Webadresse) -->
superwebsite.ch
<!-- URL mit home.html -->
superwebsite.ch/home.html
Als nächstes erstellst du weitere HTML-Seiten, um Besuchern zusätzliche Details zu jedem Eintrag deiner “Work”-section zeigen zu können. Zur besseren Unterscheidung werden solche Seiten oft Detailseiten genannt.
Bei der Erstellung gibt es zwei Varianten:
- Du speicherst neue HTML-Dateien mit passenden Namen (z.B.
inspiration.html,photos.htmletc.) imroot-Ordner (Hauptverzeichnis, in dem deineindex.htmlliegt) oder einem Unterverzeichnis (z.B.detailseiten) deiner Website. - Du erstellst Unterordner mit passendem Namen und erstellst darin jeweils eine neue
index.html(z.B.inspiration/index.html,photos/index.html).
Hinweis
Letzteres hat wie oben beschrieben den Vorteil, dass du nicht den Dateinamen mit der Endung .html in der URL ausschreiben musst. Damit es für dich einfacher ist, verwenden wir jedoch die erste Variante.
# Unterordner und Dateien erstellen Aufgabe
Zur besseren Übersicht verpacken wir sämtliche Detailseiten in einen Unterordner,den wir detailseiten nennen.
Deine Ordnerstruktur könnte dann so aussehen:
Sobald du diesen Ordner erstellt hast, kannst du wiederum im Code-Editor auf den detailseiten-Ordner einen Rechtklick machen, "New File/Neue Datei" wählen und mindestens eine neue Datei (z.B. design.html) erstellen.
# Detailseiten Markup Aufgabe
Öffne nun die eben erstellte, neue HTML Datei. Die gesamte HTML-Grundstruktur inklusive head main und footer brauchst du auch bei den Detailseiten. Die Bereiche head, header und footer kannst du unverändert aus deiner bestehenden index.html übernehmen. Nur den Inhalt von main solltest du nicht übertragen, da du nichts davon auf der Detailseite benötigst.
Hinweis
Bitte beachte die Kommentare im Code, um Abweichungen und Unterschiede zu deiner bestehenden index.html zu erkennen.
<!DOCTYPE html>
<html lang="de">
<head>
<!-- Meta Einstellungen -->
<meta charset="utf-8">
<meta name="language" content="de">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Meta Angaben -->
<!-- Hier macht es Sinn Titel und Description passend zum Inhalt der Detailseite anzupassen -->
<meta title="Inspiration — Jane Doe">
<meta name="description" content="Ideen, Skizzen und mehr von Jane Doe">
<meta name="keywords" content="ideas, sketches, inspiration">
<!-- CSS Dateien -->
<!--
Da du dich hier in eine Ebene unter dem root-Verzeichnis befindest, musst du ../ vor deine Dateipfade setzen, wenn du auf Dateien auf der Hauptebene zugreifen willst.
Kapitel: Absolute & Relative
-->
<link rel="stylesheet" type="text/css" href="../css/style.css">
<link rel="stylesheet" type="text/css" href="../css/responsive.css">
</head>
<body>
<header>
<!-- Navigationsbereich -->
<nav>
<!-- Auch hier, du befindest dich eine Ebene unter dem root-Verzeichnis und musst deshalb eine Ebene raus (../).
Am besten gibst du dann auch gleich die index.html Seite vor den bestehenden # (hash) an (../index.html#) Damit weiss der Browser dann, dass du auf die index.html Seite verlinken willst. Kapitel: Absolute & Relative -->
<a id="logo" href="../index.html"><strong>JD</strong></a>
<ul>
<li><a href="../index.html">About</a></li>
<li><a href="../index.html#expertise">Expertise</a></li>
<li><a href="../index.html#work">Work</a></li>
<li><a href="../index.html#career">Career</a></li>
<li><a href="../index.html#contact">Contact</a></li>
</ul>
</nav>
</header>
<!-- Anfang der Hauptbereichs "main" -->
<main>
<section id="detail">
<div class="detail_stage">
<div class="section_title">
<h1>Ideen, Skizzen und mehr</h1>
<span class="section_subtitle">inspiration</span>
</div>
<!-- Dasselbe wie bei der Navigation. Navigiere zwei Ebenen nach oben in deinen Bild-Pfaden -->
<img class="detail_mainimage" src="../img/work/drawing.png" alt="drawing">
</div>
<div class="detail_content">
<div class="detail_textblock">
<p>Durch meine Ausbildung und Arbeit als Designer bin ich immer auf der Suche nach neuen Inspirationsquellen.
Obwohl ich mich als Digital Designer sehe, experimentiere ich auch gerne analog auf Papier und Leinwand. Ich
zeichne und male besonders gerne Portraits von Menschen aus meinem Umfeld.</p>
</div>
<figure class="detail_media">
<img src="../img/work/scribble1.png" alt="Robert D. Jr.">
<figcaption>Fineliner, Robert D. Jr.</figcaption>
</figure>
<figure class="detail_media">
<img src="../img/work/scribble2.png" alt="Chains">
<figcaption>Fineliner, Chains</figcaption>
</figure>
<div class="detail_textblock">
<p>Ich digitalisiere auch oft meine Skizzen und forme sie dann am Bildschirm zu richtigen Illustrationen.
Zeichnen und Malen ist für mich ein sehr entspannendes Hobby und gleichzeitig fördert es meine Fähigkeiten
als Designer.</p>
</div>
<figure class="detail_media">
<img src="../img/work/scribble3.jpg" alt="Spacetravel">
<figcaption>Pencil on Canvas, Spacetravel</figcaption>
</figure>
</div>
</section>
<!-- Related section -->
<section id="related">
<div class="block_with_background">
<div class="section_title">
<h3>More</h3>
<span class="section_subtitle">Andere Arbeiten</span>
</div>
<div class="work_group">
<!-- Hier musst du nur eine Ebene nach oben, weil der Ordner "design" ebenfalls im Ordner "details" liegt. -->
<a href="design.html" class="work_item is-darken">
<!-- Hier wiederum zwei Ebenen -->
<img src="../img/work/screens.jpg" alt="screens">
<div class="work_text">
<span class="work_label">Design</span>
<h4>Grafiken & Websites</h4>
</div>
</a>
<a href="photos.html" class="work_item">
<img src="../img/work/dude.jpg" alt="dude">
<div class="work_text">
<span class="work_label">Fotografie</span>
<h4>Meine besten Bilder</h4>
</div>
</a>
</div>
</div>
</section>
</main>
<!-- Ende des Hauptbereichs "main" -->
<footer>
© Jane Doe | <a href="mailto:hello@janedoe.com">hello@janedoe.com</a>
</footer>
</body>
</html>
Du solltest fast alles aus dem oben gezeigten HTML bereits kennen. Einzig figure und figcaption sind neue Tags. Das wird meist dann verwendet, wenn du ein Bild mit einer kurzen Beschreibung semantisch korrekt gruppieren möchtest.
Aus Vollständigkeitsgründen hast du hier auch bereits den footer eingefügt. Was es mit den kryptischen Zeichen wie © oder auf sich hat erfährst du später im Kapitel Footer.
Weitere Detailseiten befüllen
Wiederhole die beschriebenen Schritte für alle Detailseiten, die du brauchst.
# Detailseiten Styles Aufgabe
Glücklicherweise kannst du viele Styles, die du bereits für die index.html geschrieben hast, auch für die Detailseiten verwenden. Du brauchst also nur noch zusätzliches CSS für neue Dinge. Da sich index und Detailseiten die gleiche CSS-Datei teilen, kannst du folgende Style-Rules einfach am Ende deiner bestehenden style.css Datei einfügen.
/*
--------------------------------
Styles für Detailseiten
--------------------------------
*/
.block_with_background {
padding-bottom: calc(3vh + 3vw); /* Innenabstand mit calc() zusamenrechnen */
background: rgba(2,54,94,0.1); /* Diese Section soll einen grauen Hintergrund erhalten um sich visuell abzugrenzen */
}
#detail .section_title h1 {
font-size: min(max(1.5rem, 3vw), 3rem);
}
.detail_mainimage {
width: 100%;
border-radius: 2rem;
}
.detail_content {
max-width: 50rem;
margin: 0 auto;
}
.detail_media {
margin: 0;
}
.detail_media figcaption {
text-align: center;
margin: 1rem 0;
}
.detail_media img {
box-shadow: 0 2px 30px 0 rgba(0, 0, 0, 0.1);
width: 100%;
}
.detail_textblock {
margin: calc(3vw + 3vh);
}
#related {
padding: 7vh 0 0;
}
#related .work_group {
padding: 0 calc(3vh + 3vw);
}
Hier gibt es ebenfalls wenig, was du nicht bereits kennst. Erwähnenswert ist die erste und letzte Style-Rule in diesem CSS-Abschnitt. Mit #detail .section_title und #related .work_group überschreibst du die bestehenden Styles von .section_title und .work_group sofern sich diese im HTML innerhalb eines DOM-Nodes mit der ID detail oder related befinden.
Hinweis
Das Leerzeichen zwischen #detail und .section_title ist hier entscheidend. Damit weiss der Browser, dass du das Child mit der Class section_title innerhalb des Parents mit der ID detail suchst. Würdest du dieses Leerzeichen weglassen, also #detail.section_title schreiben, würde der Browser nach einem Element suchen, welches selbst sowohl die ID detail als auch die Class section_title besitzt.
# Verlinken der Work-section Aufgabe
Damit du nun von deiner Startseite via “Work”-section auf die passende Detailseite gelangen kannst, musst du noch die passenden Verlinkungen einfügen. Gehe dazu wieder in deine index.html-Hauptdatei und ändere die Links in der "Work"-section.
<!-- Passe ALLE href-Attribute innerhalb der Work-Section an, damit diese zur passenden Detailseite führen. -->
<!-- Ersetze den Wert im href="#" mit dem Pfad zu deiner Datei -->
<a href="detailseiten/inspiration.html" class="work_item is-darken">
<img src="img/work/screens.jpg" alt="screens">
<div class="work_text">
<span class="work_label">Design</span>
<h4>Grafiken & Websites</h4>
</div>
</a>
# Überprüfen im Browser Aufgabe
Überprüfe im Browser, ob alles wie von dir gewünscht dargestellt wird. Überprüfe auch, ob alle Verlinkungen zwischen den Seiten richtig funktionieren. Die Vorlage würde bei unveränderter Umsetzung folgendermassen aussehen:
Stelle dich den Challenges
Falls du bisher kaum von der Vorlage abgewichen bist, wäre jetzt ein guter Zeitpunkt, damit zu beginnen. Verändere die Gestaltung und Inhalte und stelle dich unseren Challenges. Mach es zu deinem Portfolio. Dadurch erfährst du, wie selbstständig du das Gelernte effektiv anwenden kannst. Frage die Dozenten jederzeit um Unterstützung.
Passende Challenges
- #8 Parallax (Bewege verschiedene Elemente und Bilder unterschiedlich schnell beim scrollen)
- #15 Video (Füge ein Video ein das auf allen Geräten ohne Klick automatisch abspielt)
- #16 Slider (Stelle Bilder in einem Slider dar)
- #17 Lightbox (Biete Nutzern die Möglichkeit, Bilder zu vergrössern)
- #18 Previous/Next-Navigation (Füge eine Navigation ein, um zur nächsten oder letzten Seite zu gelangen)