www.PHP-Kurs.com

PHP lernen für Einsteiger
und Fortgeschrittene

PHP-Tutorial mit Videos

Sie befinden sich: Startseite » Web-App mit Datenbankanbindung » Startseite Inhalt + Design

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:

Startseite mit Inhalt und Design unserer Web-App
Startseite mit Inhalt und Design unserer Web-App

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:



(kann angegeben werden)

Nach Absenden kommt hier Feedback! Bitte nicht doppelt absenden. Danke.

Bitte unterstützen Sie dieses Projekt

Sie können dieses Projekt in verschiedenen Formen unterstützen - wir würden uns freuen und es würde uns für weitere Inhalte motivieren :).

unsere Videos bestellen

Unsere Videos und eBooks bestellen.

Spenden

Sie können uns eine Spende über PayPal zukommen lassen.

Weiterempfehlungen

Empfehlen Sie es weiter - wir freuen uns immer über Links und Facebook-Empfehlungen.

Bücher über Amazon

Bestellen Sie Bücher über folgende Links bei Amazon:

Fehler melden

Vielen Dank für Ihre Hilfe