Einen Download Knopf auf einer Webseite erstellen

PDF download PDF herunterladen
PDF download PDF herunterladen

Ein Download-Knopf (Button) kann deine Webseite deutlich professioneller aussehen lassen, als wenn du die Downloads nur über Links anbietet. Ein Button sieht ordentlicher aus, und wenn du Lust hast, ihn selbst zu gestalten, könnte er integraler Bestandteil des Seiten-Designs sein. Folge dieser Anleitung, um HTML-Buttons zu erstellen oder einen Button selbst zu designen.

Methode 1
Methode 1 von 2:

Einen HTML-Button erstellen

PDF download PDF herunterladen
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/d\/dd\/Create-a-Download-Button-Step-1-Version-2.jpg\/v4-460px-Create-a-Download-Button-Step-1-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/d\/dd\/Create-a-Download-Button-Step-1-Version-2.jpg\/v4-728px-Create-a-Download-Button-Step-1-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Ein einfacher Texteditor wie Notepad oder TextEdit ist perfekt. Gib obigen Code in den Editor ein: [1]
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/11\/Create-a-Download-Button-Step-2-Version-2.jpg\/v4-460px-Create-a-Download-Button-Step-2-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/11\/Create-a-Download-Button-Step-2-Version-2.jpg\/v4-728px-Create-a-Download-Button-Step-2-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Wenn du eine Datei zum Download anbieten willst, musst du sie entweder auf deinem eigenen Server hosten oder mit dem Button auf die Datei an einer anderen Stelle im Internet zeigen. Verwende einen FTP-Client, um die Datei, die du auf deinem Webseiten-Server zur Verfügung stellen willst, hochzuladen .
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/09\/Create-a-Download-Button-Step-3-Version-3.jpg\/v4-460px-Create-a-Download-Button-Step-3-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/09\/Create-a-Download-Button-Step-3-Version-3.jpg\/v4-728px-Create-a-Download-Button-Step-3-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Vergewissere dich, dass du die Erlaubnis des Webmasters hast, wenn du den Link auf eine Datei setzen willst, die du nicht selbst hostest.
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/f\/ff\/Create-a-Download-Button-Step-4-Version-2.jpg\/v4-460px-Create-a-Download-Button-Step-4-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/f\/ff\/Create-a-Download-Button-Step-4-Version-2.jpg\/v4-728px-Create-a-Download-Button-Step-4-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Ersetze 'Download Location' mit der URL für den Download. Pass auf, dass du die einzelnen Anführungszeichen am Anfang und Ende der Adresse und die Doppel-Anführunszeichen um “window.location='Download Location'" auch hinschreibst. Gib auch vorhandene Präfixe wie HTTP:// oder FTP:// und Datei-Endungen wie .JPG oder .EXE mit an.
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/9\/98\/Create-a-Download-Button-Step-5-Version-3.jpg\/v4-460px-Create-a-Download-Button-Step-5-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/9\/98\/Create-a-Download-Button-Step-5-Version-3.jpg\/v4-728px-Create-a-Download-Button-Step-5-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Ersetze den “Download Picture” mit den Worten, die auf dem Button angezeigt werden sollen. Achte darauf, die doppelten Anführungszeichen um den Text bei zu behalten. Halte den Button-Text kurz, so dass der Button nicht groß und unhandlich auf der Seite erscheint.
  6. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/b\/b3\/Create-a-Download-Button-Step-6-Version-3.jpg\/v4-460px-Create-a-Download-Button-Step-6-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/b\/b3\/Create-a-Download-Button-Step-6-Version-3.jpg\/v4-728px-Create-a-Download-Button-Step-6-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Du kannst den Button-Code an eine beliebige Stelle in den Hauptteil des Webseiten-Codes einfügen, und der Button wird an dieser Stelle angezeigt. Lade deinen geänderten Webseiten-Code hoch, und teste deinen neuen Button.
    Werbeanzeige
Methode 2
Methode 2 von 2:

Einen Bild-Button erstellen

PDF download PDF herunterladen
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/14\/Create-a-Download-Button-Step-7-Version-2.jpg\/v4-460px-Create-a-Download-Button-Step-7-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/14\/Create-a-Download-Button-Step-7-Version-2.jpg\/v4-728px-Create-a-Download-Button-Step-7-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Verwende dein bevorzugtes Bildbearbeitungsprogramm, und erstelle einen Button, der dem Stil deiner Webseite entspricht. Du kannst den Button so klein oder so groß wie du willst machen.
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/d\/df\/Create-a-Download-Button-Step-8-Version-2.jpg\/v4-460px-Create-a-Download-Button-Step-8-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/d\/df\/Create-a-Download-Button-Step-8-Version-2.jpg\/v4-728px-Create-a-Download-Button-Step-8-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Wenn du eine Datei zum Download anbieten willst, musst du sie entweder auf deinem eigenen Server hosten oder mit dem Button auf die Datei an einer anderen Stelle im Internet zeigen. Verwende einen FTP-Client, um die Datei, die du auf deinem Webseiten-Server zur Verfügung stellen willst, hochzuladen.
    • Lade das Button-Bild an die gleiche Stelle auf dem Server wie die Seite, in die du es einsetzen willst.
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/9\/99\/Create-a-Download-Button-Step-9-Version-2.jpg\/v4-460px-Create-a-Download-Button-Step-9-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/9\/99\/Create-a-Download-Button-Step-9-Version-2.jpg\/v4-728px-Create-a-Download-Button-Step-9-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Ein Download-Button, der durch ein Bild dargestellt wird, funktioniert auf die gleiche Weise wie alle anderen HTML-Links. Kopiere obigen Code in den Editor deiner Wahl: [2]
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/c\/c0\/Create-a-Download-Button-Step-10-Version-2.jpg\/v4-460px-Create-a-Download-Button-Step-10-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/c0\/Create-a-Download-Button-Step-10-Version-2.jpg\/v4-728px-Create-a-Download-Button-Step-10-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Gib die Datei- und Bild-Daten an. Ersetze "Download Location" mit der vollständigen URL deines Downloads, einschließlich aller HTTP:// oder FTP:// Präfixe. Ersetze "Image File" mit dem Dateinamen für das Download-Button-Bild. Wenn die Datei im gleichen Ordner wie die Seite auf dem Server ist, brauchst du nicht die gesamte Adresse anzugeben.
    • Ersetze "Hover Text" mit einem Text, der angezeigt werden soll, wenn der Benutzer mit dem Cursor auf das Bild geht.
    • Ersetze "X" und "Y" mit der Bildbreite und -höhe in Pixeln.
    • Achte darauf, die doppelten Anführungszeichen um jeden Eintrag bei zu behalten.
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/02\/Create-a-Download-Button-Step-11.jpg\/v4-460px-Create-a-Download-Button-Step-11.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/02\/Create-a-Download-Button-Step-11.jpg\/v4-728px-Create-a-Download-Button-Step-11.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Setze den Code an die Stelle, an der der Button erscheinen soll. Lade den neuen Code hoch, und lade dann die Webseite, um sicherzustellen, dass der Button funktioniert. Überprüfe, ob der Hovertext angezeigt wird und dass das Bild die richtige Größe hat.
    Werbeanzeige

Warnungen

  • Das Hochladen von Dateien auf deinen eigenen Server ist ein besserer Weg, um Dateien online weiter zu geben anstatt von anderen Webseiten abzuhängen, die deine Dateien hosten sollen. Wenn du einen Link von einer anderen Webseite kopierst, dann funktioniert der Download-Button, den du erstellt hast, nur solange, wie die Link-Adresse aktiv ist. Du solltest regelmäßig deinen Download-Button oder den Download-Link auf der Webseite, von der du den Link hast, testen, um sicherzustellen, dass Benutzer die Datei herunter laden können, wenn sie auf den Button klicken statt zu einem defekten Link zu gehen, an dem die Datei nicht mehr vorhanden ist.
  • Lade nie Dateien hoch, die das Urheberrecht verletzen, denn es könnte zu hohen Geld- oder Freiheitsstrafen führen.
Werbeanzeige

Verwandte wikiHows

Kommentare in HTML Code einfügen
Ein Hintergrund Bild in HTML einfügen
HTM Dateien öffnen
Einen E mail Link in HTML erstellen
Eine einfache Webseite mit HTML gestalten
HTML Dateien bearbeiten
Die Farbe einer Schaltfläche in HTML ändern
Bilder mit HTML einfügen
Text in HTML blinken lassen
Eine Webseite mit einfachem HTML hacken
Ein Dropdown Menü mit HTML und CSS erstellen
Text in HTML zentrieren
Mit HTML innerhalb von einer Seite verlinken
In HTML eine Linie einfügen
Werbeanzeige

Referenzen

  1. ↑ http://www.goldcoastwebdesigns.com/9.shtml
  2. ↑ http://www.quackit.com/html/codes/html_image_link_code.cfm

Über dieses wikiHow

In anderen Sprachen
Diese Seite wurde bisher 15.415 mal abgerufen.

War dieser Artikel hilfreich?

Werbeanzeige