Как сделать кнопку для скачивания

Загрузить PDF
Загрузить PDF

Кнопка для скачивания поможет вашему сайту выглядеть намного более профессионально по сравнению с вариантом, где для скачивания просто указаны ссылки. Кнопка обеспечивает более понятный интерфейс, и если вы что-то разрабатываете сами, ваши кнопки могут стать неотъемлемой частью дизайна страницы. Следуйте этому руководству, чтобы создать кнопку на HTML или кнопку собственной разработки.

Метод 1
Метод 1 из 2:

Создание кнопки на HTML

Загрузить PDF
  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>"}
    Прекрасно подойдет простой текстовый редактор вроде Notepad или TextEdit. В текстовом редакторе введите следующий код: [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>"}
    Если вы хотите предлагать файл для скачивания, вам либо придется хранить его на вашем сервере, либо связать кнопку с каким-то файлом где-то еще в сети. Используйте FTP-клиент, чтобы загрузить на сервер вашего сайта тот файл, который хотите сделать доступным.
  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>"}
    Убедитесь, что у вас есть права веб-мастера, если вы хотите ссылаться на файл, который хранится не у вас.
  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>"}
    Замените 'Download Location' на реальный URL-адрес для скачивания. Обязательно заключите адрес в одинарные кавычки, а “window.location='Download Location'" в двойные кавычки. Добавьте префиксы, например HTTP:// или FTP://, а также добавьте расширения файлов, например .JPG или .EXE. .
  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>"}
    Замените “Button Text” на те слова, которые должны быть на кнопке. Обязательно указывайте текст в двойных кавычках. Старайтесь сделать фразу короткой, чтобы кнопка на экране не казалась громоздкой.
  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>"}
    Вы можете вставить исходный код для кнопки в любом месте страницы, и кнопка появится именно в том месте. Загрузите ваш новый код страницы и протестируйте вашу новую кнопку.
    Реклама
Метод 2
Метод 2 из 2:

Создание кнопки в виде картинки

Загрузить PDF
  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>"}
    Используйте любой удобный для вас редактор изображений и нарисуйте кнопку, которая подходит по стилю вашему сайту. Вы можете сделать кнопку настолько большой (или маленькой), насколько пожелаете.
  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>"}
    Если вы хотите предлагать файл для скачивания, вам либо придется хранить его на вашем сервере, либо связать кнопку с каким-то файлом где-то еще в сети. Используйте FTP-клиент, чтобы загрузить на сервер вашего сайта тот файл, который хотите сделать доступным.
    • Загрузите изображение кнопки в то же место на сервере, где расположена страница, на которую вы эту кнопку добавляете .
  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>"}
    Кнопка для загрузки, сделанная в виде изображения, работает так же, как работают все остальные ссылки в HTML. Скопируйте следующий код в ваш редактор: [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>"}
    Введите информацию о файле и изображении. Замените “Download Location” на реальный URL-адрес для скачивания, включая любые префиксы HTTP:// или FTP://. Замените “Image File” на имя файла изображения кнопки. Если файл на сервере расположен там же, где и страница, нет необходимости указывать полный путь.
    • Замените “Hover Text” на текст, который должен появляться, когда пользователь наводит курсор мыши на изображение кнопки.
    • Замените “X” и “Y” на ширину и высоту изображения в пикселях соответственно.
    • Обязательно добавляйте все эти записи в двойных кавычках.
  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>"}
    Разместите код там, где должна появиться кнопка. Загрузите новый код и затем откройте свою веб-страницу, чтобы убедиться, что кнопка работает. Проверьте, что текст-подсказка появляется при наведении курсора, а сама картинка правильного размера.
    Реклама

Предупреждения

  • Никогда не загружайте файлы в нарушение авторских прав, так как это может привести к крупному штрафу или даже тюремному заключению.
  • Намного лучше закачивать файлы на ваш собственный сервер и выкладывать их потом в общий доступ, чем зависеть от других сайтов, на которых они хранятся. Если вы копируете ссылку на расположение файла с другого сайта, создаваемая вами кнопка для скачивания будет работать только до тех пор, пока эта ссылка остается действующей. Вам придется периодически проверять работоспособность кнопки или ссылки на том сайте, с которого вы ее взяли, чтобы убедиться, что пользователи при нажатии на кнопку смогут скачать файл, а не перейдут по битой ссылке из-за того, что файл уже не существует.
Реклама

Дополнительные статьи

Как
создать простую веб страницу в Блокноте
Как
создать простую веб страницу с помощью HTML
Как
задать цвет фона в HTML
Как
создать ссылку для оплаты через PayPal
Как
добавить фоновое изображение в HTML
Как
комментировать в HTML
Как
выделить текст жирным с помощью HTML
Как
задать ширину и высоту картинки с помощью HTML
Как
бесплатно разместить свой сайт в Интернете
Как
подчеркнуть текст в HTML
Как
начать wiki–сайт
Как
использовать теги цвета шрифта в HTML
Как
сделать сайт в Word
Как
создать ссылку на электронную почту в HTML
Реклама

Источники

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

Об этой статье

На других языках
Эту страницу просматривали 28 081 раз.

Была ли эта статья полезной?

Реклама