Matze: Verweise auf Grafiken

Beitrag lesen

Hallo!

Noch einmal... Bitte vermeide Vollzitate! Das ist hier nicht gern gesehen!

aber was soll ich machen[..]

Fragen und gute Ratschläge annehmen anstatt sie konsequent zu ignorieren!

Jetzt mal Fakt: in welcher Grundform würdest Du diese Darstellung programmieren? Mit Frames fehlt mir der kpl. Hintergrund und der wäre mir wichtig.

Vergiss Frames bitte sofort wieder!

Zuerst einmal solltest du die Tabelle entfernen. Dann reduzierst du die übrig gebliebenen Elemente auf die welche auch tatsächlich Inhalt enthalten.

  
<body>  
    <a href="index.html">&nbsp;&nbsp;Joe Frick</a> <!-- hier später noch whitespace zu padding -->  
    <a href="projekte.html">Projekte</a>  
    <a href="links.html">Links</a>  
    <a href="kontakt.html">Kontakt</a>  
    <a href="mailto:webmaster@joe-frick.de">webmaster@joe-frick.de</a>  
    <a href="impressum.html">impressum</a>  
    <a href="index.html">home</a>  
</body>  

Anschließend fügst du die Elemente hinzu die du bisher unsinnigerweise als Bild eingebunden hast.

  
<h2>Artikel-Überschrift</h2>  
<hr>  
<p>Artikel Text...</p>  

Jetzt beginnst du darüber nachzudenken wie du das ganze _semantisch_ gruppieren kannst.

  
<body>  
    <!-- Hier möchte der Seitentitel/die Überschrift stehen.  
         Befasse dich also mit den entsprechenden Elementen <h1> bis <h6>  
         (Wobei in der Praxis wohl nur h1 - h4 relevant sind)! -->  
    <h1><a href="index.html">Joe Frick</a></h1>  
  
    <!-- Hier möchte ein Menü kommen. Befasse dich also mit den, dafür in  
         Frage kommenden Elementen. Z.B. <nav> und <ul>. Du wählst in dem Fall <nav> -->  
    <nav>  
        <a href="projekte.html">Projekte</a>  
        <a href="links.html">Links</a>  
        <a href="kontakt.html">Kontakt</a>  
    </nav>  
    <!-- Hier wird es ein bisschen tricky denn optisch passt es zwar nicht ganz aber technisch  
         gesehen würde ich es einfach mal in die Kategorie "footer" schieben. -->  
    <footer>  
        <a href="mailto:webmaster@joe-frick.de">webmaster@joe-frick.de</a>  
        <a href="impressum.html">impressum</a>  
        <a href="index.html">home</a>  
    </footer>  
    <!-- Da waren doch noch diese Artikel und davon gab es auch gleich noch mehrere...  
         Du gruppierst diese also in <section> und diese widerum in <article> -->  
    <article>  
        <section>  
            <h2>Artikel-Überschrift</h2>  
            <hr>  
            <p>Artikel Text...</p>  
        </section>  
        <section>  
            <h2>Artikel-Überschrift</h2>  
            <hr>  
            <p>Artikel Text...</p>  
        </section>  
    </article>  
</body>  

Jetzt bringst du das alles in eine möglichst sinnvolle Reihenfolge. Du beschränkst dich darauf, die Positionen von <footer> und <article> zu tauschen.

  
<h1><!-- ... --></h1>  
<nav><!-- ... --></hav>  
<article><!-- ... --></article>  
<footer><!-- ... --></footer>  

Wow! Jetzt hast du ja schon ganz schön viel geschafft nachdem du unseren Ratschlägen gefolgt bist und die Tabelle entsorgt und den Inhalt stattdessen semantisch sinnvoll* gruppiert hast! -.-
Jetzt musst du dich um den CSS-Teil kümmern. Schaffst du das auch alleine?

frustrierte Grüße, Matze

* Wenn du html4 und/oder xhtml-kompatibel arbeiten willst, benutze statt <nav>, <article>, <section> und <footer> jeweils ein <div> mit der entsprechenden Klasse. Z.B. <div class="nav">