Benutzer-Werkzeuge

Webseiten-Werkzeuge


programmieren:cms

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen RevisionVorhergehende Überarbeitung
Nächste Überarbeitung
Vorhergehende Überarbeitung
programmieren:cms [14/01/2022 14:40] – [Menue] connyprogrammieren:cms [14/01/2022 18:17] (aktuell) – [Seite 1] conny
Zeile 2: Zeile 2:
  
  
-Hier erkläre ich die Grundlagen wie man selbst ein einfaches CMS programmiert.+Hier erkläre ich die Grundlagen wie man selbst ein einfaches responsive CMS / eigene Homepage programmiert.
 Ich habe es extra einfach gehalten, damit es nachvollziehbar ist. Ich habe es extra einfach gehalten, damit es nachvollziehbar ist.
 Verbesserungen und Verschönerungen kann man dann selbst machen. Verbesserungen und Verschönerungen kann man dann selbst machen.
Zeile 10: Zeile 10:
 {{ programmieren:6qwxijbrl8.png?600 }} {{ programmieren:6qwxijbrl8.png?600 }}
  
-1. Grundstruktur+**Grundstruktur**\\
 Wir brauchen folgende Scripte damit unsere Seite funktional und individuell erweiterbar ist:\\ Wir brauchen folgende Scripte damit unsere Seite funktional und individuell erweiterbar ist:\\
 Startseite -> index.php\\ Startseite -> index.php\\
Zeile 19: Zeile 19:
 CSS -> style.css\\ CSS -> style.css\\
  
 +Der Vorteil des modularen Aufbaus ist, dass man Änderung welche alle Seiten betreffen nur einmal machen muss.\\
  
-DEMO: https://wiki.hennweb.de/demo/cms1/index.php+DEMO: https://wiki.hennweb.de/demo/cms1/index.php\\ 
 +Download: [[https://wiki.hennweb.de/demo/cms1/Mini-CMS.zip|Mini-CMS.zip]]\\
  
 ==== Startseite ==== ==== Startseite ====
Zeile 107: Zeile 109:
 <!--- Kopfbereich --> <!--- Kopfbereich -->
 <div id="header-wrapper"> <div id="header-wrapper">
- <img class="responsive" style="max-width:350px;" src="logo.png">+ <a href="index.php"><img class="responsive" style="max-width:350px;" src="logo.png"></a>
 </div> </div>
 <!--- Ende Kopf --> <!--- Ende Kopf -->
Zeile 131: Zeile 133:
 Wenn man einen weiteren Menüpunkt hinzufügen will muss man nur noch eine weitere Zeile einfügen\\ Wenn man einen weiteren Menüpunkt hinzufügen will muss man nur noch eine weitere Zeile einfügen\\
 <code> <code>
-<li><a href="<DATEINAME>"  class="<?php if($page == 'home'  {echo "active";} ?>">Home</a></li>+<li><a href="<DATEINAME>"  class="<?php if($page == '<name der selbst definierten Variable $page'  {echo "active";} ?>"><NAME DES MENÜPUNKTS</a></li>
 </code> </code>
  
 +Ein weiteres gutes Menü mit Dropdown und responsive findet man hier: https://codepen.io/andornagy/pen/RNeydj
 ==== Footer ==== ==== Footer ====
  
Zeile 148: Zeile 150:
 </code> </code>
  
 +Zeile 6 ersetzen wir durch unseren eigenen Inhalt (HTML)\\
 ==== Seite 1 ==== ==== Seite 1 ====
  
Zeile 169: Zeile 172:
 </code> </code>
  
 +Beispiel Seite1\\ 
 +In Zeile 7 haben wir die Variable $page definiert "seite1". Diese benötigen wir in MENUE.PHP um den entsprechenden Menüpunkt aktiv zu stellen.\\ 
 +\\ 
 +Ansonsten brauchen wir nur noch Zeile 10 durch unseren eigenen Inhalt auszutauschen.\\
 ==== Seite 2 ==== ==== Seite 2 ====
  
Zeile 190: Zeile 196:
 </html> </html>
 </code> </code>
 +
 +Selbe Info wie bei Seite1\\
  
  
Zeile 213: Zeile 221:
 </code> </code>
  
 +Selbe Info wie bei Seite1
 ==== Style.css ==== ==== Style.css ====
  
Zeile 310: Zeile 318:
 <!--- Standard Script Files --> <!--- Standard Script Files -->
 <!-- z.B. Bootstrap laden --> <!-- z.B. Bootstrap laden -->
-<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>+<!--<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>-->
 </code> </code>
  
programmieren/cms.1642167637.txt.gz · Zuletzt geändert: 14/01/2022 14:40 (Externe Bearbeitung)

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki