Visio-Vorlage mit HTML realisieren

[peter189]

Hallo erstmal,
vorneweg möchte ich mich schon als HTML-Anfänger outen, ich hoffe es hat trotzdem jemand die Geduld mir ein wenig zu helfen :-) Möchte folgendes realisieren. Ich habe MS-Word oder MS-Visio Dateien vorliegen die folgendermaßen aussehen:




Nun möchte ich diese genau in einer HTML-Seite umsetzen. Natürlich könnte man das ganze durch MS-Office als HTML-Seite ausgeben lassen, aber finde das ganze viel zu unsauber und es wird nicht alles genauso umgesetzt wie gewünscht. Nun wollte ich eure Meinung höre wie man so etwas verwirklichen könnte. Die Tabelle an sich würde ich wahrscheinlich noch irgendwie hinbekommen und die Tabellenbegrezung in der Breite dürfte auch kein Problem sein, aber ich mache mir eher Sorgen um die Prozessabbildung. Kann ich das ganze hier wirklich nur als Bild in die Tabelle einfügen? Jedes Prozesselemt bekommen entsprechend eine Bemerkung und Datum, diese Zeilen müsste als direkt auf der Höhe des entsprechendem Element sein. Wie bekommt man das hin? Bilder zerschnipseln und wieder durch die Tabelle zusammenfügen? Und die einzelnen Elemente müssen auch Links zu andere Seiten enthalten können... Fragen über Fragen ;) Würde mich freuen wenn da jemand Tipps hat wie man sowas realisieren kann... oder vielleicht auch noch ein Programmtipp hat :)

Viele Grüße Peter

 

[_Thor_]

Hi,

das ist doch mal ein Fall, indem man beruhigt auf eine Tabelle zurückgreifen kann.

Hier mal kurz was zusammengeschrieben:

      <table>
        <tr>
          <th>Titel</th>
          <th>Bemerkung</th>
          <th>Datum</th>
        </tr>
        <tr>
          <td rowspan="4"><img src="image.jpg" alt="alternativer Text" /></td>
          <td>Lorem ipsum dolor sit amet</td>
          <td>10.10.2010</td>
        </tr>
        <tr>
          <td>Lorem ipsum dolor sit amet</td>
          <td>10.10.2010</td>
        </tr>
        <tr>
          <td>Lorem ipsum dolor sit amet</td>
          <td>10.10.2010</td>
        </tr>
        <tr>
          <td>Lorem ipsum dolor sit amet</td>
          <td>10.10.2010</td>
        </tr>
      </table>

 

[peter189]

Hi,

das ist doch mal ein Fall, indem man beruhigt auf eine Tabelle zurückgreifen kann.

Danke erstmal für deine Antwort, aber leider ist es mit deinem Lösungsansatz noch nicht ganz getan. Die Prozessabbildung die du als Bild in die linke Spalte getan hast müsste an bestimmten Elementen einen Link erhalten (siehe Bild). Ausserdem müssten die Zeile mit den Bemerkungen jeweils auf der selben Höhe der jeweiligen Elemente sein. Aber ich befürchte ich muss wohl auf jeden Fall den Prozess als komplettes Bild in die Tabelle einpflegen, hmm

 

[_Thor_]

Die Höhe kannst du für jede Zeile separat einstellen

CSS

tr {height: ***px;}

und für die Links über dem Bild kannst du entweder das Bild als Hintergrundbild

CSS

{background-image: url("bild.jpg");}

einbinden und normale Links entsprechend darüber positionieren, oder du benutzt eine Image Map.

 

[peter189]

Die Höhe kannst du für jede Zeile separat einstellen

CSS

tr {height: ***px;}

und für die Links über dem Bild kannst du entweder das Bild als Hintergrundbild

CSS

{background-image: url("bild.jpg");}

einbinden und normale Links entsprechend darüber positionieren, oder du benutzt eine Image Map.

Vielen Dank! Denke mal werde es so machen...