Eine Website entsteht - mit HTML und CSS ... und Eurer Hilfe

noeli-A-res · 1. März 2010

Website-Entstehung von noeli-a-res

Hier bitte nur die Fortschritte und kurze Anmerkungen, Diskussionen im anderen Thread.

-------------------------
Hallo zusammen,

wie bereits geschrieben, möchte ich sehr gern eine Website erstellen, die den heutigen Webstandards entspricht und ein modernes Outfit zeigt - ich hoffe dabei auf Eure Unterstützung.

Für mich bedeutet das, von der alten Denkweise (u.a. layouten mit Hilfe von unsichtbaren Tabellen) Abschied zu nehmen und zu versuchen, Inhalt und Design strikt zu trennen.

Das Konzept (Inhalt und Grundstruktur) soll von der vorhandenen Seite im Großen und Ganzen übernommen werden.

Grundstruktur:
[Blockierte Grafik: http://img690.imageshack.us/img690/2186/strukturl.jpg]

Als Quelltext-Editor werde ich das im Seminar empfohlene Programm Scriptly benutzen.

Ich beginne mit der Startseite. Im Scriptly erzeuge ich eine neue HTML-Datei und schreibe den kompletten Text der Startseite zwischen die Tags <body></body>.

Das ist der Code:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">




<head>
    <title>MerMax</title>




    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
    <meta name="description" content="Private Seite von Mer & Max, den Polarhunden Ares & Noelia, ihr Zuhause am Niederrhein - mit vielen Fotos" />
    <meta name="author" content="MerMax" />
    <meta name="keywords" content="MerMax,Niederrhein,..." />




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




<body>
  <!-- Inhalt Kopfbereich -->
  Die MerMax-Seite




  <!-- Inhalt Menü -->
  Mer &amp; Max
  Haus &amp; Hof
  Wald &amp; Feld
  Hund &amp; Wolf
  Reisen &amp; Events
  Impressum
  Kontakt
  G&auml;stebuch
  Start




  <!-- Inhalt Untermenu -->
  N.E.W.S.
  Das ist neu hier:




  <!-- Inhalt Fußbereich -->
  &copy; 2010 by MerMax
  mermax@mermax.de




  <!-- Inhalt Textbereich -->
  THEMEN&Uuml;BERSICHT
  Mer &amp; Max
  Wer oder was steckt dahinter - Eine kurze Vorstellung
  Haus &amp; Hof
  Das Zuhause von Mer &amp; Max
  Wald &amp; Feld
  Das unmittelbare Drumherum
  Hund &amp; Wolf
  Ares und Noelia - wilde Hunde oder zahme W&ouml;lfe?
  Reisen &amp; Events
  Wo es uns alle schon einmal hinverschl&auml;gt!
</body>
</html>

Alles anzeigen

Das Ergebnis im Browser:
[Blockierte Grafik: http://img202.imageshack.us/img202/8102/browservorschau.jpg]

War das richtig so? Und wie jetzt weiter? Die Textbereiche in DIV-Container packen? Oder hätte ich die DIV-Container als erstes festlegen müssen?

LG, noeli-A-res

lauras · 1. März 2010

Nenene

Fang am besten damit an, deinen Text auszuzeichnen - p, h1-6, a, etc.
Danach kannst du mit den divs anfangen, aber auch nur wenn nötig. Wichtig ist, dass divs nicht zum layouten, sondern zum gruppieren von Elementen gedacht sind

LG
Laura

noeli-A-res · 1. März 2010

Okay Laura, ich habe es mal versucht:

Der Code (verkürzt - ich hoffe, das ist in Ordnung):

Code

...
  <body>




  <!-- Inhalt Kopfbereich -->
  <h1>
    Die MerMax-Seite
  </h1>




  <!-- Inhalt Menü -->
    <a href="mermax.html">Mer &amp; Max</a>
    ...
    <a href="reisenevents.html">Reisen &amp; Events</a>
  <br />
    <a href="impressum.html">Impressum</a>
   ... 
    <a href="index.html">Start</a>




  <!-- Inhalt Untermenu -->
    <h3>
      N.E.W.S.
    </h3>
    Das ist neu hier:




  <!-- Inhalt Textbereich -->
    <h2>
      THEMEN&Uuml;BERSICHT
    </h2>
      <p>
        <a href="mermax.html">Mer &amp; Max</a><br />
        Wer oder was steckt dahinter - Eine kurze Vorstellung
      </p>
      ...
        <p>
        <a href="reisenevents.html">Reisen &amp; Events</a><br />
        Wo es uns alle schon einmal hinverschl&auml;gt!
      </p>
  <!-- Inhalt Fußbereich -->
    &copy; 2010 by MerMax
    <a href="mailto:mermax@mermax.de">mermax@mermax.de</a>




</body>

Alles anzeigen

Und das Ergebnis im Browser:
[Blockierte Grafik: http://img691.imageshack.us/img691/2716/browservorschau2.jpg]

Ist das richtig so?

noeli-A-res · 7. März 2010

Als nächsten Schritt habe ich die Bereiche in div-Container gepackt. So schaut der Code jetzt aus (verkürzt):

Code

...
  <body>




  <!-- Inhalt Kopfbereich -->
  <div id="kopfbereich">[/color]
    <h1>
      Die MerMax-Seite
    </h1>
  </div>




  <!-- Inhalt Menü -->
  <div id="menue">
    <a href="mermax.html">Mer &amp; Max</a>
    ...
    <a href="index.html">Start</a>
  </div>




  <!-- Inhalt Untermenü -->
  <div id="untermenue">
    <h3>
      N.E.W.S.
    </h3>
    Das ist neu hier:
  </div>




  <!-- Inhalt Textbereich -->
  <div id="textbereich">
    <h2>
      THEMEN&Uuml;BERSICHT
    </h2>
      <p>
        <a href="mermax.html">Mer &amp; Max</a><br />
        Wer oder was steckt dahinter - Eine kurze Vorstellung
      ...
      <p>
        <a href="reisenevents.html">Reisen &amp; Events</a><br />
        Wo es uns alle schon einmal hinverschl&auml;gt!
      </p>
  </div>




  <!-- Inhalt Fußbereich -->
  <div id="fussbereich">
    &copy; 2010 by MerMax
    <a href="mailto:mermax@mermax.de">mermax@mermax.de</a>
  </div>




</body>

Alles anzeigen

Die Darstellung im Browser-Fenster hat sich dadurch nicht verändert.

noeli-A-res · 13. März 2010

Hallo,
mit Eurer Hilfe steht jetzt der HTML-Teil der Index-Seite. Er schaut wirklich sehr minimalistisch aus!
Hier der Code innerhalb der body-Tags:

Code

<body>




  <!-- Inhalt Kopfbereich -->
  <h1 id="kopfbereich">
    Die MerMax-Seite
  </h1>




  <!-- Inhalt Menü -->
  <ul id="menue">
    <li><a href="mermax.html">Mer &amp; Max</a></li>
    <li><a href="haushof.html">Haus &amp; Hof</a></li>
    <li><a href="waldfeld.html">Wald &amp; Feld</a></li>
    <li><a href="hundwolf.html">Hund &amp; Wolf</a></li>
    <li><a href="reisenevents.html">Reisen &amp; Events</a></li>
  <br />
    <li><a href="impressum.html">Impressum</a></li>
    <li><a href="kontakt.html">Kontakt</a></li>
    <li><a href="">G&auml;stebuch</a></li>
    <li><a href="index.html">Start</a></li>
  </ul>




  <!-- Inhalt News -->
  <div id="news">
    <h3>
      N.E.W.S.
    </h3>
      <p>
      Das ist neu hier:
      </p>
  </div>




  <!-- Inhalt Textbereich -->
  <div id="textbereich">
    <h2>
      THEMEN&Uuml;BERSICHT
    </h2>
      <p>
        <a href="mermax.html">Mer &amp; Max</a><br />
        Wer oder was steckt dahinter - Eine kurze Vorstellung
      </p>
      <p>
        <a href="haushof.html">Haus &amp; Hof</a><br />
        Das Zuhause von Mer &amp; Max
      </p>
      <p>
        <a href="waldfeld.html">Wald &amp; Feld</a><br />
        Das unmittelbare Drumherum
      </p>
      <p>
        <a href="hundwolf.html">Hund &amp; Wolf</a><br />
        Ares und Noelia - wilde Hunde oder zahme W&ouml;lfe?
      </p>
      <p>
        <a href="reisenevents.html">Reisen &amp; Events</a><br />
        Wo es uns alle schon einmal hinverschl&auml;gt!
      </p>
  </div>




  <!-- Inhalt Fußbereich -->
  <p id="fussbereich">
    &copy; 2010 by MerMax
    <a href="mailto:mermax@mermax.de">mermax@mermax.de</a>
  </p>




</body>

Alles anzeigen

Und hier die Browservorschau:
[Blockierte Grafik: http://img638.imageshack.us/img638/5544/browservorschau3.jpg]

Nun bin ich mal echt gespannt, wie sich mit Hilfe von CSS die Seite gestalten lässt.

LG, noeli-A-res

Eine Website entsteht - mit HTML und CSS ... und Eurer Hilfe

Jetzt mitmachen!

Teilen