Hur man gör en nedladdningsknapp

Författare: Bobbie Johnson
Skapelsedatum: 6 April 2021
Uppdatera Datum: 1 Juli 2024
Anonim
How to Create Download Button   HTML and CSS
Video: How to Create Download Button HTML and CSS

Innehåll

En nedladdningsknapp hjälper din webbplats att se mycket mer professionell ut än att bara länka till nedladdning. En knapp ger ett renare gränssnitt, och om du designar något själv kan dina knappar bli en integrerad del av siddesignen. Följ denna handledning för att skapa en HTML -knapp eller din egen anpassade knapp.

Steg

Metod 1 av 2: Skapa en HTML -knapp

  1. 1 Skapa en knapp i källredigeraren. En enkel textredigerare som Anteckningar eller TextEdit är bra. I en textredigerare anger du följande kod:
  2. 2 Ladda upp filen till din server. Om du vill erbjuda en fil för nedladdning måste du antingen lagra den på din server eller associera knappen med någon fil någon annanstans i nätverket. Använd en FTP -klient för att ladda upp filen du vill göra tillgänglig för din webbserver.
  3. 3 Se till att du har rättigheter för webbansvariga om du vill länka till en fil som inte lagras av dig.
  4. 4 Ersätt 'Download Location' med din riktiga nedladdnings -URL. Var noga med att ange adressen i enskilda citattecken och "window.location = 'Download Location" i dubbla citattecken. Lägg till prefix, till exempel HTTP: // eller FTP: //, och lägg till filtillägg, till exempel .webp eller .EXE ..
  5. 5 Skriv på knappen. Ersätt ”Knapptext” med orden som du vill ska visas på knappen. Var noga med att inkludera text i dubbla citattecken. Försök att hålla din fras kort så att knappen på skärmen inte verkar otymplig.
  6. 6 Placera källkoden på din sida. Du kan klistra in källkoden för knappen var som helst på sidan, och knappen visas exakt på den platsen. Ladda upp din nya sidkod och testa din nya knapp.

Metod 2 av 2: Skapa en knapp som bild

  1. 1 Rita din nedladdningsknapp. Använd vilken bildredigerare du vill och rita en knapp som matchar stilen på din webbplats. Du kan göra knappen så stor (eller liten) som du vill.
  2. 2 Ladda upp filen och bilden med knappen till din server. Om du vill erbjuda en fil för nedladdning måste du antingen lagra den på din server eller associera knappen med någon fil någon annanstans i nätverket. Använd en FTP -klient för att ladda upp filen du vill göra tillgänglig för din webbserver.
    • Ladda upp knappbilden till samma plats på servern där sidan där du lägger till den här knappen finns.
  3. 3 Skriv källkoden för nedladdning. Nedladdningsknappen, gjord som en bild, fungerar på samma sätt som alla andra länkar i HTML.Kopiera följande kod till din editor:
  4. 4 Ange fil- och bildinformation. Ersätt "Hämta plats" med en verklig nedladdnings -URL, inklusive eventuella HTTP: // eller FTP: // prefix. Ersätt "Image File" med filnamnet på knappbilden. Om filen finns på servern på samma plats som sidan behöver du inte ange hela sökvägen.
    • Ersätt ”Hover Text” med texten som ska visas när användaren för musen över knappbilden.
    • Ersätt "X" och "Y" med bildens bredd och höjd i pixlar.
    • Var noga med att lägga till alla dessa poster i dubbla citattecken.
  5. 5 Ange källkoden på din sida. Placera koden där knappen ska visas. Ladda upp ny kod och öppna sedan din webbsida för att se om knappen fungerar. Kontrollera att ledtexten visas vid svävaren och att själva bilden har rätt storlek.

Varningar

  • Ladda aldrig upp filer som bryter mot upphovsrättslagarna, eftersom det kan leda till stora böter eller till och med fängelse.
  • Det är mycket bättre att ladda upp filer till din egen server och dela dem senare än att vara beroende av andra webbplatser där de lagras. Om du kopierar en länk till en filplats från en annan webbplats fungerar nedladdningsknappen du skapar bara så länge länken förblir giltig. Du måste regelbundet kontrollera funktionen för knappen eller länken på webbplatsen från vilken du tog den för att se till att användare kommer att kunna ladda ner filen när de klickar på knappen och inte klickar på den trasiga länken p.g.a. det faktum att filen inte längre finns.