meine Web

Arira · 8. Januar 2014

Hallo,

Das ist meine jetzt noch Webseite, da
ich diese erworben habe und sie in HTML Frameset ist, hatte ich vor es mal
selber zu versuchen.

Leider werden über Validation Fehler
angezeigt die ich jetzt versuchen möchte zu ändern.

Alles von
Frameset ist Rot gekennzeichnet und ich weiß echt nicht ob man
dieses Design
in HTML so hin bekommen könnte und bin leider ein Nob in diesem Punkt.

Es
ist eine 3 Spalten Seite oben das Banner Links und Mitte Anzeigen und wird über index alle 3 angezeigt, da mein
Alter Editor nicht auf Windows 7 läuft bin ich etwas verwirrt. Ich
habe zwar den Wegegebot jetzt als Editor aber er hat keine 3 Spalten
vorlagen dabei.

Aber
schaut euch die Seite einfach mal an und vielleicht hat ja jemand
einen Rat wie ich dieses Gerüst umbauen kann und das Design behalte kann.

Lg. Sabine

Hier
mal der Link: http://www.rollstuhlfahrer-innen.de/

Basi · 8. Januar 2014

Die Frage die sich stellt ist folgende:

Möchtest du einfach nur eine Internetseite auf der du einfach ein Design einfügen kannst, problemlos Überschriften, Textformate, etc. einstellen und Texte aktualisieren kannst, in dem Fall empfiehlt es sich ein Blogsystem oder ein simples CMS zu nutzen, das installierst du auf einem Webserver und von dem Punkt an kannst du alles im Browser einstellen (über eine Administrationsseite)

oder

möchtest du tatsächlich HTML und CSS lernen und deine Seite komplett von selbst aufbauen (mit Code, und nur mit Code), in dem Fall musst du mit einem Texteditor (oder HTML-Editor: z.B. Scriptly oder Sublime Text (englisch)) und einem leeren Dokument anfangen und deine Seite komplett selber gestalten, das ist natürlich etwas umständlicher aber es eröffnet dir deutlich mehr Möglichkeiten und macht zudem auch noch eine Menge Spaß.

Wysiwyg-Editoren, bei denen man in einem Programm Kästchen verschieben kann und welche hinterher "HTML" generieren sind, bitte um Verzeihung, für die Tonne.

Arira · 8. Januar 2014

Hallo Basiii,

Als erstes vorweg war ich 5 Stunden auf
der html-seminar und habe mich gewundert was alles veraltet ist im
HTML und was neu ist.

Ich glaube schon das ich mit dem
Scriptly zurecht kommen werde und das ich eine 3 Spalten Seite von
Grund auf neu gestalten kann. Frage mich nur wie ich anfangen soll

Auf der Index wird das Gerüst ja so
dargestellt:

</head>

</frameset>

Kommentar:

</noframes>

</html>

und das würde ich gerne in HTML
erstellen.

Basi · 8. Januar 2014

Schau dir mal bitte diese Seite an, dort kannst du dir das grundlegende Layout generieren lassen, du suchst dir einfach eines aus, in deinem Fall das 3-Spalten Layout ganz unten (obwohl deine jetzige Seite meiner Meinung nach nur 2 Spalten hat) und klickst auf Vorschau anzeigen, dann kannst du den Quelltext der Seite (Rechtsklick -> Seitenquelltext zeigen / STRG + U) rauskopieren und in Scriptly einfügen, du hast dann ein vollständiges Grundgerüst und kannst damit rumprobieren.

Als Vereinfachung habe ich dir hier das 3-Spalten Layout auch schon rauskopiert:

HTML

<!DOCTYPE html>
<html lang="de">
<head>
<meta name="generator" content="http://www.html-seminar.de/css-layout-generator.php" />
<!-- 
Empfehlung: das CSS unbedingt auslagern, die entsprechende Datei wird dann eingebunden mit:
<link rel="stylesheet" type="text/css" href="design.css" />  
-->
<style type="text/css">
<!--
body {
  font: 100.01% Verdana, Arial, Helvetica, sans-serif;
}




* {
  margin:0;
  padding:0;
}




#seite {
  width: 780px;
  margin: 0 auto;
}




#kopfbereich {
  background-color:lightblue;
}




#inhalt {
  background-color: lightgreen;
  margin-left: 250px;
  margin-right: 250px;
}




#steuerung {
  float: left;
  width:250px;
  background-color: yellow;
}




#spalterechts {
  float: right;
  width:250px;
  background-color: orange;
}




#fussbereich {
  clear: both;
  background-color:lightblue;
}
-->
</style>




</head>
<body>
<div id="seite">
  <div id="kopfbereich">
    Kopfbereich - ihr Namen oder so
  </div>




  <div id="steuerung">
    Bereich Steuerung
  </div>
  <div id="spalterechts">
    Spalte rechts
  </div>




  <div id="inhalt">
     hier kommt nun der Inhalt Ihrer Website
  </div>




  <div id="fussbereich">
    <!-- Bitte einen Link auf die Seite von uns setzen,
    bzw. folgenden Link uebernehmen - Danke -->
    unsere Empfehlung als HTML-Tutorial: <a href="http://www.html-seminar.de/" 
    target="_blank">www.HTML-Seminar.de</a>
  </div>
</div>
</body>
</html>

Alles anzeigen

Arira · 8. Januar 2014

upps usw. dann ist das mit 3 Spalten
eine Falsche Info, nun ja dann ist es eine zwei Spalten Seite, da
kann man mal sehen das ich Jahre lang immer gedacht habe das wären 3
Spalten Seiten die im Netz laufen. Da kann mal man sehen wie schnell
jemand auf dem Holzdampfer kommt.

Ich bin deinem Link gefolgt und habe
mir die 2 Spalten Seite genommen, wenn ich das Gerüst nachbauen
möchte dann ist die 3 Spalten Seite nicht Richtig.

Danke dir erst einmal für deine Hilfe,
werde mich auf jeden Fall weiterhin melden, jetzt aber erst mal
schauen wie ich damit klar komme.

Lg. Sabine

Arira · 9. Januar 2014

Hallo Basiii,

Kann ich das für den Kopfbereich
nehmen?

Da ja der Banner.jpg im Kopfbereich
rein soll sowie der Besucherzähler, der ist in Flash und Links
angeordnet:

Der Kopfbereich schaut jetzt so aus:

#kopfbereich {

background-color:black;

}
Lg. Sabine

Basi · 9. Januar 2014

Du kannst das Bild theoretisch direkt der Überschrift hinzufügen:

CSS

h1 {
  background: url(Banner.jpg);
}




/* oder eben: */




#kopfbereich {
  background: url(Banner.jpg);
}

Alles anzeigen

Du musst dann nur noch die Höhe und Breite des Bereichs anpassen

Den Besucherzähler würde ich vorerst ignorieren und ganz am Schluss einfügen, am Besten auch nicht ganz oben auf der Seite, da können wir später drüber reden, es gibt erst wichtigeres

Noch mal zu den Spalten:
Wie viele Spalten du einsetzen möchtest bleibt ganz dir überlassen, uns sind da beinahe keine Möglichkeiten gesetzt, ich habe hier mal 3 Beispiele vorbereitet:

Beispiel 1:

2 Spalten: Erst das Menü, dann der Inhalt, die Überschrift darüber erstreckt sich über die volle Breite:

HTML

<!DOCTYPE html>
<html>
<head>
  <title>Titel</title>
  <style>
body, h1, h2, h3, p, div, ul, li, a {
  margin: 0;
  padding: 0;
  font-family: Tahoma;
}




body {
  position: absolute;
  width: 700px;
  left: 5%;
}




h1 {
  margin-top: 50px;
  background-color: #AEBB1A;
  padding: 5px 0;
  border: 1px dotted black;
  text-align: center;
  font-size: 1.3em;
}




h2 {
  text-align: center;
  font-size: 1.3em;
  padding-bottom: 5px;
  border-bottom: 1px dashed #989898;
}




h3 {
  font-size: 1em;
  padding: 20px 0 0 10px;
}




p {
  width: 95%;
  text-align: justify;
  padding-bottom: 5px;
}




ul {
  width: 150px;
  float: left;
  list-style: none;
}




ul li a, ul li a:visited {
  display: block;
  width: 150px;
  height: 28px;
  margin: 5px 0 5px 0;
  background: #FFC08E;
  border: 1px dotted black;




  text-align: center;
  line-height: 30px;
  text-decoration: none;
  color: #313131;
}




ul li a:hover {
  border: 1px solid black;
  background: #FFB476;
  margin: 5px -1px 5px 1px;
}




div#content {
  width: 520px;
  float: right;
  overflow: auto;
  background: #E3E3E3;
  border: 1px solid #989898;
  margin-top: 5px;
  padding: 10px;
}
  </style>
</head>




<body>
  <h1>Meine Internetseite</h1>
  <ul>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
    <li><a href="#">Link 4</a></li>
  </ul>
  <div id="content">
    <h2>Seite 1</h2>
    <h3>Text 1</h3>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
    diam nonumy eirmod tempor invidunt ut labore et dolore magna
    aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
    duo dolores et ea rebum. Stet clita kasd gubergren, no sea
    takimata sanctus est Lorem ipsum dolor sit amet.</p>
    <h3>Text 2</h3>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
    diam nonumy eirmod tempor invidunt ut labore et dolore magna
    aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
    duo dolores et ea rebum. Stet clita kasd gubergren, no sea
    takimata sanctus est Lorem ipsum dolor sit amet.</p>
  </div>
</body>
</html>

Alles anzeigen

Beispiel 2:

Beispiel 1 mit nur einer Spalte, Überschrift, Menü und Inhalt sind alle untereinander angeordnet:

HTML

<!DOCTYPE html>
<html>
<head>
  <title>Titel</title>
  <style>
body, h1, h2, h3, p, div, ul, li, a {
  margin: 0;
  padding: 0;
  font-family: Tahoma;
}




body {
  position: absolute;
  width: 700px;
  left: 5%;
}




h1 {
  margin-top: 50px;
  background-color: #AEBB1A;
  padding: 5px 0;
  border: 1px dotted black;
  text-align: center;
  font-size: 1.3em;
}




h2 {
  text-align: center;
  font-size: 1.3em;
  padding-bottom: 5px;
  border-bottom: 1px dashed #989898;
}




h3 {
  font-size: 1em;
  padding: 20px 0 0 10px;
}




p {
  width: 95%;
  text-align: justify;
  padding-bottom: 5px;
}




ul {
  overflow: auto;
  list-style: none;
}




ul li {
  float: left;
}




ul li a, ul li a:visited {
  display: block;
  width: 163px;
  height: 28px;
  margin: 5px;
  background: #FFC08E;
  border: 1px dotted black;




  text-align: center;
  line-height: 30px;
  text-decoration: none;
  color: #313131;
}




ul li a:hover {
  border: 1px solid black;
  background: #FFB476;
  margin: 6px 5px 4px 5px;
}




div#content {
  overflow: auto;
  background: #E3E3E3;
  border: 1px solid #989898;
  padding: 10px;
}
  </style>
</head>
<body>
  <h1>Meine Internetseite</h1>
  <ul>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
    <li><a href="#">Link 4</a></li>
  </ul>
  <div id="content">
    <h2>Seite 1</h2>
    <h3>Text 1</h3>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
    diam nonumy eirmod tempor invidunt ut labore et dolore magna
    aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
    duo dolores et ea rebum. Stet clita kasd gubergren, no sea
    takimata sanctus est Lorem ipsum dolor sit amet.</p>
    <h3>Text 2</h3>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
    diam nonumy eirmod tempor invidunt ut labore et dolore magna
    aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
    duo dolores et ea rebum. Stet clita kasd gubergren, no sea
    takimata sanctus est Lorem ipsum dolor sit amet.</p>
  </div>
</body>
</html>

Alles anzeigen

Beispiel 3:

Reiner Spielkram um meine Aussage zu unterstreichen das uns beinahe keine Steine im Weg liegen:

HTML

<!DOCTYPE html>
<html>
<head>
  <title>Titel</title>
  <style>
body, div {
  margin: 0;
  padding: 0;




  color: #1A1A1A;
}




body {
  padding-left: 3px;
}




div.first {
  width: 94px;
  height: 200px;
  margin: 0 2px;
  margin-top: 5px;
  border: 1px dashed black;




  float: left;
  position: relative;
  z-index: 3;




  font-weight: bold;
  text-align: center;
  line-height: 199px;
}




div.second {
  width: 124px;
  height: 170px;
  margin: 0 2px;
  border: 1px dashed black;




  float: left;
  position: relative;
  z-index: 2;




  font-weight: bold;
  text-align: center;
  line-height: 169px;
}




div.row {
  width: 205px;
  height: 45px;
  margin: 2px 0;
  padding-right: 15px;
  border: 1px dashed black;




  position: relative;
  z-index: 1;




  font-weight: bold;
  text-align: right;
  line-height: 44px;
}




div.container {
  position: absolute;
  top: 180px;
  left: 45px;
}




div.row_container {
  position: absolute;
  top: 40px;
  left: 520px;
}




.red    { background-color: #FF6F6F; }
.blue   { background-color: #6C6CFF; }
.green  { background-color: #A1B242; }
.orange { background-color: #DAA559; }
.pink   { background-color: #FD92FE; }
  </style>
</head>
<body>
  <div class="first red">Spalte 1.0</div>
  <div class="first blue">Spalte 1.1</div>
  <div class="first green">Spalte 1.2</div>
  <div class="first orange">Spalte 1.3</div>
  <div class="first pink">Spalte 1.4</div>
  <div class="first green">Spalte 1.5</div>
  <div class="container">
    <div class="second orange">Spalte 2.0</div>
    <div class="second pink">Spalte 2.1</div>
    <div class="second red">Spalte 2.2</div>
    <div class="second blue">Spalte 2.3</div>
  </div>
  <div class="row_container">
    <div class="row green">Reihe 1.0</div>
    <div class="row red">Reihe 1.1</div>
    <div class="row blue">Reihe 1.2</div>
    <div class="row pink">Reihe 1.3</div>
    <div class="row red">Reihe 1.4</div>
    <div class="row orange">Reihe 1.5</div>
  </div>
</body>
</html>

Alles anzeigen

Anmerkung: Bitte versuche doch ab jetzt deinen Code (wenn du welchen Postest) in einen Code Tag zu setzen:

Code

[code=html]
  <h1>MEIN HTML</h1>

[/code]

Arira · 9. Januar 2014

Hallo Basiii,

Ich merke schon das HTML CSS nicht
einfach sein wird für mich.

Mal sehen ob ich es so erklären kann
wie die Seite aufgebaut werden sollte wenn es möglich ist.

Als erstes kommt die Navigation,
zweitens kommt banner = top, drittens kommt Haupt = Start,

das sind 3 Seiten die vierte Seite ist
die Index wo alle zusammen laufen und diese im Browser anzeigt. Es
sind alles Einzelseiten, hier mal der Quelltext von der Index:

HTML

<!DOCTYPE HTML>
<html lang="de" dir="ltr">




<head>
<title>Rollstuhlfahrer-innen</title>
<link rel="shortcut icon" type="image/x-icon" href="53bc6da5-a377-464e-ab31-bd2c9db56487-16.ico" />
  <meta name="description" content="">
  <meta name="keywords" content="">
  <meta name="author" content="">
  <meta name="revisit-after" content="7 days">
  <meta name="language" content="de">
  <meta name="robots" content="index, follow">
  <link rel="stylesheet" href="style.css" type="text/css">
</head>




<frameset framespacing="0" frameborder="no" border="0" cols="170,*">
   <frame scrolling="no" name="navigation" marginwidth="0" marginheight="0" src="navigation.html">
   <frameset framespacing="0" frameborder="no" border="0" rows="105,*">
     <frame name="top" marginwidth="0" marginheight="0" scrolling="no" src="top.html">
     <frame scrolling="auto" name="haupt" marginwidth="0" marginheight="0" src="start.html">
   </frameset>
</frameset>




<noframes>
      Kommentar: Es gibt in jeder Stadt Hindernisse die für Rollstuhlfahrer/innen oft nicht überwindbar sind und man steht dann wie ein Ochs vorm Berg.
</noframes>
</html>

Alles anzeigen

Nun weiß ich nicht ob das mit HTML CSS Möglich ist?
Die Vorlage die ich als 2 Spalten genommen habe über den Link, Zeigt eine Seite nur an.
Meine frage, ist HTML CSS nur so aufgebaut das man immer wieder ein und die gleiche Seite nehmen muss oder kann man die Navi und das Banner als feste Position stehen lassen und der Inhalt ändert sich nur?
Auch deine Quelltexte habe ich mir angesehen, sehe ja nicht schlecht aus aber ich glaube das kommt nicht so ganz hin wie ich es mir gedacht habe.
Deswegen schaue doch mal bitte hier:

HTML

http://www.rollstuhlfahrer-innen.de/

Lg. Sabine

Basi · 9. Januar 2014

Wie deine Seite aufgebaut ist weiß ich, meine Beispiele waren auch nicht dafür gedacht das du sie benutzt sondern das du verstehst wie das mit der Anordnung der Elemente funktioniert, wenn du einfach nur den Code für deine Seite ohne Frames brauchst sieht das etwa so aus:

HTML

<!DOCTYPE html>
<html>




<head>
  <title>Titel</title>
  <style>
html, body {
  height: 100%;
}
body, ul, div, h1 {
  margin: 0;
  padding: 0;
}
ul#menu {
  position: relative;
  float: left;
  width: 10%;
  min-height: 100%;
  background-color: #FF8484;
}




div#container {
  position: relative;
  width: 90%;
  float: right;
  min-height: 100%;
  background-color: #FFCD84;
}




h1 {
  background-color: #9FB374;
}
  </style>
</head>




<body>
  <ul id="menu">
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
    <li><a href="#">Link 4</a></li>
  </ul>
  <div id="container">
    <h1>&Uuml;berschrift</h1>
    <div id="content">
      Inhalt
    </div>
  </div>
</body>
</html>

Alles anzeigen

Inhalte laden (so wie die Frames es tun würden, wenn man denn welche nutzte, was wir nicht wollen) tut man dann mithilfe von PHP, da kann ich dich nur zum PHP-Kurs schicken und/oder dir wenn dein Design steht später helfen das umzusetzen.
Du solltest dich derzeit nicht auf den Inhalt und wie du ihn auf deine Seite bekommst konzentrieren sondern allein darauf das Grundgerüst aufzubauen.

Arira · 9. Januar 2014

Hallo Basiii,

Ja meine Seite soll ohne Frameset
laufen, weil die ja die Fehler verursachen.

Dann möchte ich die Teile in HTML+CSS
einfügen in den einzelnen Seiten wie Navi – Banner usw.

und dann alles in voll Bild sein, wäre
das den überhaupt möglich und kann man dann diese auch auf den
Handy usw. sehen?
Das ich erst das Grudgerüst Bauen muss ist ja das a und o, blos ich verstehe es nicht ganz mit dem css und nun auch noch php

Basi · 9. Januar 2014

Siehe hier

Probiere den Code aus, skaliere das Browserfenster, du wirst sehen die Größe passt sich an. Um dein Design für Handys fit zu machen musst du erst verstehen wie es überhaupt funktioniert und bezüglich PHP sagte ich das wir das später machen.

Arira · 9. Januar 2014

Ja ich habe mir das angesehen, es ist zwar etwas verschoben aber das kommt ja noch in die Reihe.
Bin auch schon im PHP Lesen und Testen, ist garnicht so einfach.

Arira · 10. Januar 2014

Wo fange ich jetzt an mit dem
Grundgerüst ist es egal eine einfache HTML Datei zu erstellen.

The Scout · 11. Januar 2014

Ich verstehe dich so, dass du eine einzelne Indexseite haben willst, die das Gerüst liefert, in die später der Inhalt gepackt wird, richtig? Und das ohne Frames, richtig? Dann brauchst du PHP, den Link hat Basiii schon geliefert. Aber hier mal der ungefähre Aufbau, eines HTML 5 + PHP Gerüsts:
index.php

PHP

<!Doctype html><html lang="de"><head>    <meta charset="UTF-8" />    <title>Titel der Seite</title>    <!-- CSS-, Icon-, und sonstige Links und andere Metas ... --></head><body>    <?php include("pfad/zum/Contenordner/" . $_GET["seite"]  ".html oder .php"); ?></body></html>

htmlseite.html oder .php:

HTML

<header>    <h1>Titel des entsprechenden Inhalts</h1></header><nav>    <ul>        <li><a href="#">Link 1</a>        usw.    </ul><nav><section>    <p>Lorem ipsum eigentlicher Inhalt...</p></section><footer>    <p>Copyright, Impressum und Sonstiges</p></footer>

~~design.css~~

CSS

header{    width: 100%;    height: [i]-Zahl-[/i]px;}nav{    width:20%;    float:left;    height: auto;}content{    width: 80%;    height: auto;}footer{    clear:both;    width:100%;    height: [i]-Zahl-[/i]px}

Natürlich kann man das auch ändern, zB header, nav und footer in die index.php stecken und nur noch den Inhalt dynamisch nachladen.
Die internen Links dazu sähen dann übrigens so aus: <a href="index.php?seite=impressum">Impressum</a>. Um das zu ändern müsste man mit der .htacces Datei arbeiten, das ginge jetzt zu weit.

Arira · 11. Januar 2014

Hallo The Scout,

ja genau alles soll in der Index
zusammenlaufen (die hatte ich etwas weiter oben schon im Beitrag)

Habe jetzt echt keine Lust mehr, den
ich war seit 0:45 – jetzt 11:00 Uhr beim HTML und CSS bei mit
schreiben usw. den Erfolg kann man sehen wenn man hinter den
de/seite2 eingibt.

Bitte habe jetzt Verständnis das ich
jetzt nicht mehr kann.

So bin jetzt wieder Wach und einen schönen Kaffee habe ich jetzt auch. Da man mich warscheinlich nicht oder viel mehr ich drücke mich verkert aus, möchte ich euch zeigen was ich meine.

erste Seite:

HTML

<!DOCTYPE HTML>
<html lang="de" dir="ltr">




<head>
<title>Rollstuhlfahrer-innen</title>
<link rel="shortcut icon" type="image/x-icon" href="53bc6da5-a377-464e-ab31-bd2c9db56487-16.ico" />
  <meta name="description" content="">
  <meta name="keywords" content="">
  <meta name="author" content="">
  <meta name="revisit-after" content="7 days">
  <meta name="language" content="de">
  <meta name="robots" content="index, follow">
  <link rel="stylesheet" href="style.css" type="text/css">
</head>




<frameset framespacing="0" frameborder="no" border="0" cols="170,*">
   <frame scrolling="no" name="navigation" marginwidth="0" marginheight="0" src="navigation.html">
   <frameset framespacing="0" frameborder="no" border="0" rows="105,*">
     <frame name="top" marginwidth="0" marginheight="0" scrolling="no" src="top.html">
     <frame scrolling="auto" name="haupt" marginwidth="0" marginheight="0" src="start.html">
   </frameset>
</frameset>




<noframes>
      Kommentar: Es gibt in jeder Stadt Hindernisse die für Rollstuhlfahrer/innen oft nicht überwindbar sind und man steht dann wie ein Ochs vorm Berg.
</noframes>
</html>

Alles anzeigen

zeite Seite:

HTML

<!DOCTYPE HTML>
<html lang="de" dir="ltr">




<head>
  <title>Navigation</title>
  <link rel="shortcut icon" type="image/x-icon" href="53bc6da5-a377-464e-ab31-bd2c9db56487-16.ico" /> 
  <meta name="description" content="">
  <meta name="keywords" content="">
  <meta name="language" content="de">
  <meta name="robots" content="index, follow">

  <link rel="stylesheet" href="style.css" type="text/css">
</head>




<body class="hintergrund">




  <img src="images/kugel.jpg" width="105" height="105" border="0" alt="">




  <ul class="menue">
    <li><a title="Startseite" href="start.html" target="haupt">Home</a></li>
    <li><a title="Seite 2" href="seite2.html" target="haupt">St&auml;dte Info</a></li>
    <li><a title="Seite 3" href="seite3.html" target="haupt">Sportvereine</a></li>
    <li><a title="Seite 4" href="seite4.html" target="haupt">Zitate/Gedichte</a></li>
    <li><a title="Seite 5" href="seite5.html" target="haupt">Seite 5</a></li>
    <li><a title="Seite 6" href="seite6.html" target="haupt">Seite 6</a></li>
    <li><a title="Seite 7" href="seite7.html" target="haupt">Seite 7</a></li>
    <li><a title="Seite 8" href="seite8.html" target="haupt">Seite 8</a></li>
    <li><a title="Seite 9" href="seite9.html" target="haupt">Seite 9</a></li>
    <li><a title="Seite 10" href="seite10.html" target="haupt">Seite 10</a></li>
    <li><a title="Seite 11" href="seite11.html" target="haupt">E-Cards</a></li>
    <li><a title="Seite 12" href="seite12.html" target="haupt">Oblivion</a></li>
    <li><a title="Seite 13" href="seite13.html" target="haupt">Links / Banner</a></li>
  </ul>
<br>




</html>

Alles anzeigen

dritte Seite:

HTML

<!DOCTYPE HTML>
<html lang="de" dir="ltr">




<head>
  <title>top</title>
  <link rel="shortcut icon" type="image/x-icon" href="53bc6da5-a377-464e-ab31-bd2c9db56487-16.ico" />
  <meta name="description" content="">
  <meta name="keywords" content="">
  <meta name="author" content="">
  <meta name="revisit-after" content="10 days">
  <meta name="language" content="de">
  <meta name="robots" content="index, follow">

  <link rel="stylesheet" href="style.css" type="text/css">
</head>




<body>
<br>
<center>
<img src="bilder/banner.jpg" width="468" height="63" style="border: 0px;" />
</center>
</body>
</html>

Alles anzeigen

Das sind jetzt alle 3 Seiten die ich gerne umbauen möchte so das dort kein Farmeset mehr vorhanden ist, ob jetzt jede Seite PHP (was ich noch nicht verstehe) oder HTML+CSS.

Wie man sehen kann ist es etwas Rot

Lg. Sabine

Arira · 11. Januar 2014

Moin,
nun habe ich eine frage, wie kann ich das in PHP oder so umsetzen?

Danke für die Antwort. Lg. Sabine

HTML

<frameset framespacing="0" frameborder="no" border="0" cols="170,*">
   <frame scrolling="no" name="navigation" marginwidth="0" marginheight="0" src="navigation.html">
   <frameset framespacing="0" frameborder="no" border="0" rows="105,*">
 	<frame name="top" marginwidth="0" marginheight="0" scrolling="no" src="top.html">
 	<frame scrolling="auto" name="haupt" marginwidth="0" marginheight="0" src="start.html">
   </frameset>
</frameset>

The Scout · 12. Januar 2014

Hi Sabine,
schau dir doch bitte meinen Code oben nochmal an, da habe ich dir gezeigt, wie es ohne Frameset geht. Aber hier nochmal Schritt für Schritt:

Was ist grundlegend zu tun?
1. deine Seite 1 schmeißt du komplett weg, die Framesets brauchst du nicht
2. Deine Seite zwei veränderst du, wie, erkläre ich unten
3. du brauchst verschiedene Seiten mit Inhalt, aber NUR Inhalt, kein Grundgerüst mehr!!! Sähe dann so aus:

HTML

<h1>Hauptüberschrift</h1><p>Lorem ipsum, irgendein Text, dein Inhalt, der eingebunden wird, auch gerne mit Bildern, ....</p>

Wie baut man das zusammen?
Dafür nennst du deine Seite zwei in index.php um. damit sie am Anfang aufgerufen wird. Dann löscht du den Inhalt aus dem kompletten body-Tag, der soll ja dynamisch einebunden werden, und ersetzt ihn mit folgendem Code:

PHP

<?phpif(isset($_GET["seite"]) && $_GET["seite"] != ""){    include("pfad/zu/den/Inhaltsdateien/" . $_GET["seite"] . ".php");} else {    include("pfad/zu/den/Inhaltsdateien/startseite.php");}?>

~~Natürlich ist dieser Code noch nicht ausgereift, er ist erst einmal zur zur grundlegenden Verdeutlichung gedacht, WIE es geht.~~

Also, was hast du nun? Du hast zwei Seiten, eine index.php mit HTML Grundgerüst und obigem PHP Code im body-Tag und eine, sagen wir, startseite.php im Ordner pfad/zu/den/Inhaltsdateien/.
Wenn du nun die index.php aufrufst, guckt der PHP Code, ob er eine Variable namens seite bekommt, was nicht der Fall ist, deshalb nimmt er die startseite.php aus entspr. Ordner und bindet diese ein.

Wie übergibt man die Variable seite?
Ganz einfach: Via dem Link

HTML

<a href="index.php?seite=[i]seitenname[/i]>Startseite</a>

~~Wenn man nun seitenname durch zB impressum ersetzt, also~~

HTML

<a href="index.php?seite=impressum>Impressum</a>

~~dann wird im Ordner pfad/zu/den/Inhaltsdateien/ nach der Seite impressum.php gesucht und diese eingebunden.~~

The Scout · 12. Januar 2014

Hier nochmal ein Artikel zu dem Thema, der das Ganze ausführlicher erläutert: Webbausteine.de Blog

Arira · 12. Januar 2014

Hallo The Scout,

Danke erst mal für deine Erklärung.

Du schreibst was ist grundlegend zu
tun?

Ich habe jetzt das gemacht:

Ich habe jetzt eine index.php – eine
nav.html – design.css, auch habe ich einen PHP Ordner erst mal zum
Testen auf dem Server gelegt.

Habe den Quelltext aus deinen Beitrag
14 genommen und die Seiten damit gefühlt.

Was ich aber mit dem Text machen soll
ist mir noch nicht ganz klar Beitrag 17, soll ich den jetzt nehmen?

Der Beitrag 18 Webbausteine, das bringt
mich jetzt etwas – sagen wir mal durch einander.
Aber das ist dabei rausgekommen:

HTML

src="navi.html">
	src="top.html">
	src="start.html">

da vor ist natürlich bei navi - top - start noch das Frameset dabei.
Wenn ich die Index raus nehme, sucht er die start und alle von der Navi sind nicht dabei.
Den die index muss doch alle 3 laden wie angezeigt, kann man das in PHP nicht so hinbekommen das diese 3 (sage mal) Links nicht zusammen die Seite anzeigt?

Lg. Sabine

In deinem Beitrag sagtest du etwas von eine (htacces Datei) kann man das darüber laden?

The Scout · 13. Januar 2014

So, vergiss alles andere vorher, hier ist es richtig herum aufgezogen.

Was brauchst du?

Mindestens drei Seiten
- index.php
- navigation.html
- footer.html

Was kann noch dazu?

.htaccess (im gleichen Ordner wie index.php, der Punkt vorne ist wichtig!)
robots.txt
Alle anderen von dir gewünschten HTML-Seiten

Wie sehen diese Seiten aus?
index.php, impressum.php, kontakt.php, alle wichtigen Seiten

PHP

<!doctype html>
<html lang="de">




<head>
    <meta charset="UTF-8" />
    <title>Titel de Seite</title>




    <meta name="description" content="Seitenbeschreibung" />
    <meta name="keywords" content="Stichworte, zur, Suche, bei, Suchmaschinen, kommagetrennt" /> -->




    <!-- evtl. noch seitenspezifische Scripts oder Designs entsprechend einbinden -->




    <?php include("navigation.html"); ?>




<section>
    <h1>Seitenüberschrift</h1>
    <p>Inhalt der index.php</p>
</section>




<?php include("footer.html"); ?>

Alles anzeigen

navigation.html

HTML

<link rel="stylesheet" href="globales.css" />
    <script src="globales.js" /> <!-- zB jQuery oÄ -->




    <meta name="author" content="Dein Name " />
    <meta name="publisher" content="Der Host, zB 1und1 " />
    <meta name="copyright" content="Offizieller Name desjenigen FÜR den die Seite ist" />
    <meta name="revisit" content="After 30 days" /> <!-- Sagt den Suchmaschinen, sie sollen die Seite nur jeden Monat einmal auf Aktualisierungen prüfen -->
    <meta name="robots" content="INDEX,FOLLOW" /> <!-- Sagt Suchmaschinen, sie dürfen auf diese Seite und jedem Link auf dieser Seite folgen -->
</head>




<body>




<header>
    <img title="Seitenlogo" src="Pfad/zum/Logo.png" />
    <p>Seitenweite Überschrift, mit CSS stylen</p>
</header>




<nav>
    <ul>
        <li><a href="index.php">Startseite</a></li>
        <li><a href="medien.php">Bilder, Videos und Co.</a>
            <ul>
                <li><a href="bilder.php">Bilder</a></li>
                <li><a href="videos.php>Videos</a></li>
            </ul>
        </li>
        <li><a hrf="impressum.php">Impressum</a></li>




    <!-- Einfach die Links zu den Seiten entsprechend sortiert weiter einfügen -->
</nav>

Alles anzeigen

footer.html

HTML

<footer>
    <p>&copy; 2014 Sabine Arira (dein echter Name) | <a href="kontakt.php">Kontakt</a> <!-- andere Links für die Fußzeile --></p>
</footer>




</body>




</html>

Alles anzeigen

Das heißt, du baust dir EINMAL eine Navigation mit den ganzen globalen Metatags, dem Header und der eigentlichen Navigation, sowie EINMAL deinen Footer, und diese bindest du dann nur noch mit dem Befehl

PHP

<?php include("navigation.html"); ?>
// beziehungsweise
<?php include("footer.html"); ?>

wie oben gezeigt in die Seiten ein.

Der Vorteil?
Wenn du eine neue Seite erstellst, musst du nicht mehr auf allen anderen die Links in der Navigation ändern, du änderst nur noch einmal die Liste in der navigation.html.

Und alles andere ist jetzt Design, also CSS.

Und ja ich weiß, ich erkläre nicht besonders gut Das merke ich öfter

meine Web

Jetzt mitmachen!

Teilen