Startseite mit Inhalt und Design
Und nun können wir den eigentlichen Inhalt integrieren.
Unseren HTML-Inhalt erweitern wir um:
<div data-role="main" class="ui-content">
<h1>Mike Coustic - Gitarrist</h1>
<p>Ich freue mich, dass du den Weg zu mir gefunden hast.</p>
<p>Damit du den Weg zu meinen Veranstaltungen findest, hier die
<a href="#termine">aktuellen Veranstaltungstermine</a>.</p>
<img src="bilder/musiker.jpg" class="bildiminhalt" alt="Mike Coustic">
<p>Viel Spaß auf der Seite</p>
<p>Mike Coustic</p>
</div>
Wir sehen im Absatz ein Link. Hier sieht man auch eine Besonderheit in jQuery mobile – wir können über einen normalen Link eine Unterseite aufrufen – anstelle einer URL geben wir nur „#“ und die vergebene Bezeichnung der ID für diesen Bereich an. In dem Fall springen wir dann zu der Seite mit der ID „termine“, die wir im folgenden Schritt machen werden.
Zur Erinnerung – das Foto liegt also Download unter https://www.php-kurs.com/webapp/bilder/musiker.jpg bereit.
Das angezeigt Foto soll immer die komplette Breite unseres Bildschirms nutzen. Dazu haben wir dem Foto in HTML die Klasse „bildiminhalt“ zugeteilt und erweitern unsere CSS-Datei um:
.bildiminhalt {
width: 100%;
height: auto;
}
Somit haben wir unsere Startseite fertig:
Hier der bisher komplette Code:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Mike Coustic - Gitarrist</title>
<meta name="description" content="Veranstaltungstermine von Mike Coustic.
Zusätzlich Hörbeispiele.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"
rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<!-- eigene CSS-Anweisungen -->
<link href="design.css" rel="stylesheet">
</head>
<body>
<div data-role="page" id="startseite" data-theme="b">
<!-- Hier kommt die Startseite -->
<?php anzeige_kopfbereich('startseite'); ?>
<div data-role="main" class="ui-content">
<h1>Mike Coustic - Gitarrist</h1>
<p>Ich freue mich, dass du den Weg zu mir gefunden hast.</p>
<p>Damit du den Weg zu meinen Veranstaltungen findest, hier die <a href="#termine">aktuellen Veranstaltungstermine</a>.</p>
<img src="bilder/musiker.jpg" class="bildiminhalt" alt="Mike Coustic">
<p>Viel Spaß auf der Seite</p>
<p>Mike Coustic</p>
</div>
<?php anzeige_fussbereich(); ?>
</div>
</body>
</html>
<?php
function anzeige_kopfbereich($bereich = "") {
echo '
<div data-role="header" data-position="fixed">
<a href="#startseite" class="ui-btn ui-icon-home ui-btn-icon-left ';
if ($bereich == 'startseite') {
echo ' ui-btn-active ui-state-persist';
}
echo '">Startseite</a>
<h1>Mike Coustic - Gitarrist</h1>
<a href="#termine" class="ui-btn ui-icon-calendar ui-btn-icon-left ';
if ($bereich == 'termine') {
echo ' ui-btn-active ui-state-persist';
}
echo '">Termine</a>
</div>
';
}
function anzeige_fussbereich($bereich = "") {
echo '<div data-role="footer" data-position="fixed" class="bereichfuss">';
echo ' <a href="#musik" class="ui-btn ui-icon-audio ui-btn-icon-left ui-btn-icon-notext ui-corner-all';
if ($bereich == 'musik') {
echo ' ui-btn-active ui-state-persist';
}
echo '">Hörbeispiele</a>';
echo ' <a href="#kontakt" class="ui-btn ui-icon-mail ui-btn-icon-left ui-btn-icon-notext ui-corner-all';
if ($bereich == 'kontakt') {
echo ' ui-btn-active ui-state-persist';
}
echo '">Kontakt</a>';
echo ' <a href="#login" class="ui-btn ui-icon-user ui-btn-icon-left ui-btn-icon-notext ui-corner-all';
if ($bereich == 'login') {
echo ' ui-btn-active ui-state-persist';
}
echo '">Login</a>';
echo '</div>';
}
?>
Und der bisherige CSS-Code:
.bereichfuss {
text-align: center;
background-image: linear-gradient(#444 , #222);
}
.bildiminhalt {
width: 100%;
height: auto;
}
div[data-role="page"] {
background-color: #333;
}
.bildiminhalt {
width: 100%;
height: auto;
}
Wenn Sie einen Fehler finden, bitte mitteilen (egal ob Schreibfehler oder inhaltlicher Fehler).
Mit Maus fehlerhafte Stelle markieren und übernehmen mit folgendem Button: