HTML

[Msmessi54]

Hallo miteinander, zunächst bin ich noch Anfänger im Bereich HTML.
Zwar muss ich eine HTML Seite erstellen für eine Netzwerkdokumentation, dabei geht es einfach darum das ich die ganzen Anschlüsse der Schwitches miteinander verlinke bzw. dorthin wohin diese hinführen. Nun zur meiner Frage, weiß irgendwer von euch wie ich so einen Switch zeichnen kann und diese Verlinken kann. Im Anhang ist einer zu sehen. Danke im Voraus LG Lukas

 

[MrMurphy]

Hallo,

die Einbindung des Bildes des Switches hat nicht funktioniert.

Mit HTML und CSS kann nicht gezeichnet werden. Mit CSS sind zwar Muster möglich, die für deine Vorgabe aber nicht geeignet sind.

Grafiken müssen mit einem Bildbearbeitungsprogramm in einem geeigneten Format ersellt werden.

Es gibt Rastergrafiken, auch als Pixelgrafiken bezeichnet, (gif, jpg oder png) oder Vektorgrafiken (svg).

Für dein Vorhaben scheinen mir Vektorgrafiken am geeignetsten, also SVG. Eine geeignete Software dafür ist die Freeware Inkscape.

Allerdings sind Vektorgrafiken nicht so einfach zu erstellen wie Pixelgrafiken.

SVG werden zwar als Text gespeichert und können mit jedem Editor erstellt oder bearbeitet werden. Für komplexe Zeichnungen ist aber Incscape geeigneter.

Gruss

MrMurphy

 

[Msmessi54]

Als erstes danke für deine rasche Antwort!
Nehmen wir an, ich hab mit diesem Programm meinen gewünschten Switch gezeichnet inkl. deren Anschlüsse, wie kann ich dann diesen z.B Anschluss 1 markieren so nachdem ich drauf geklickt habe weiter verlinkt werde. Kann man außerdem mit diesem Programm meine Zeichnung in Htlml datei importieren?
Lg Lukas

 

[MrMurphy]

Hallo

Bemerkung 1:

Nach deinen Fragen befürchte ich, dass du dich mit der Aufgabe übernommen hast. Ohne Vorwissen in HTML, CSS und einem Bildbearbeitungsprogramm wirst du gnadenlos auflaufen.

Bemerkung 2:

Deine Informationen sind sehr dünn. Von daher stochere ich mit meinen Angaben mehr oder weniger im Nebel. Ich weiß so zum Beispiel nicht mal ansatzweise wie der Switch und seine Anschlüsse aussehen und wie differenziert die Grafik erstellt werden muss.

Kann man außerdem mit diesem Programm meine Zeichnung in Htlml datei importieren?

Mit welchem Programm? Du erstellst die Grafiken in einem passenden Programm, speicherst sie ab und bindest sie in die Webseite, also ins HTML, mit HTML-Elementen ein.

Die von mir genannten Grafikformate (jpg, png, svg) sind alle zur Darstellung im Browser geeignet.

wie kann ich dann diesen z.B Anschluss 1 markieren so nachdem ich drauf geklickt habe weiter verlinkt werde.

Bei den Rastergrafiken (gif und png) gibt es dafür in HTML sogenannte Image Maps.

Siehe zum Beispiel

https://de.wikipedia.org/wiki/Verweissensitive_Grafik

Bei SVG können in der SVG selbst die einzelnen Objekte mit Links hinterlegt werden. Dadurch können sie genauer angesteuert werden.

Siehe zum Beispiel

http://svg.tutorial.aptico.de/start3.php?knr=6&kname=Hyperlinks&uknr=6.1&ukname=Besonderheiten des a-Elements

Ein weiterer Vorteil von SVG ist, das sie mehr oder weniger unbeschränkt vergrößert werden können ohne an Qualität zu verlieren. Rastergrafiken werden dabei schnell pixelig.

Allerdings sind SVG deutlich schwieriger zu erstellen. Das funktioniert ganz anders als mit den üblichen Grafikprogrammen wie PaintShop oder Gimp, da sie auf der Auszeichnungssprache XML aufbauen.

Zum Schluß ein Link zu einer SVG. Du kannst dir da mal den Quelltext anschauen oder sie deutlich Vergrößern:

http://www.adamczewski.com/images/dblpics/thv10-blockbild_de.svg

Und noch ein Beispiel

http://www.ratpak.de/depot/IMG/svg/schaltplan-sr500.svg

Mit Rastergrafiken sind solche diffizielen Darstellungen kaum möglich.

Gruss

MrMurphy

 

[Msmessi54]

Tut mir leid das ich so spät antworte, obwohl du immer sehr schnell und hilfreich! antwortest, hab mich mal mit deinen Ratschlägen beschäftigt und mein HTML wissen erweitert. Das mit den Anschlussverlinkungen hat geklappt, jetzt hängt es mich bei der Menü Leiste auf, ich hab zwar rausgefunden wie man eine erstellt aber schaut einfach schei*** . Ideal wäre eine Drop-Down Menüleiste und und ansatzweise gut ausschauen sollte es auch, im Internet hab ich gute Tutorials gefunden doch alle haben HTML mit CSS eingebunden. Hättest du vielleicht so eine Vorlage, wenn ja könntest du mir diese geben.
im Anhang kannst du ein ähnliches wie das ich zusammengebracht hab sehen und eines das ich so ähnlich hätte.
Danke im voraus
LG Lukas

 

[MrMurphy]

Hallo

im Internet hab ich gute Tutorials gefunden doch alle haben HTML mit CSS eingebunden

Das ist der normale Aufbau von Webseiten. Ich kann das auch nicht anders. Von daher würde dir eine zusätzliche Erklärung von mir kaum weiterhelfen.

Zumal die beiden Vorberkungen meiner vorigen Antwort immer noch gelten. So lieferst du keine konkreten Informationen. Ohne konkrete Informationen ist eine konkrete Hilfe nicht möglich. Und mit allgemeinen Hilfen bist du offensichtlich überfordert.

Zusätzlich

Ideal wäre eine Drop-Down Menüleiste

muss ich dir hier widersprechen. Drop-Down-Menüs sollten aus verschiedenen Gründen nicht (mehr) verwendet werden. Sie haben einfach zu viele Nachteile.

Deshalb habe ich für mich persönlich entschieden zu Drop-Down-Menüs (wie auch zu anderen inzwischen veralteten Techniken) keine Hilfe mehr zu geben. Es sollte genügend andere User geben, die dir bei dem Problem weiterhelfen können.

Gruss

MrMurphy