Как создать кнопку загрузки: 11 шагов (с изображениями)

Оглавление:

Как создать кнопку загрузки: 11 шагов (с изображениями)
Как создать кнопку загрузки: 11 шагов (с изображениями)

Видео: Как создать кнопку загрузки: 11 шагов (с изображениями)

Видео: Как создать кнопку загрузки: 11 шагов (с изображениями)
Видео: Курс по Outlook. Урок 11. Как добавить контакт. Группа контактов в Outlook 2024, Апрель
Anonim

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

Шаги

Метод 1 из 2: создание кнопки HTML

Создание кнопки загрузки Шаг 1
Создание кнопки загрузки Шаг 1

Шаг 1. Создайте кнопку в редакторе кода

Простой текстовый редактор, такой как Блокнот или TextEdit, отлично подойдет. Введите в редактор следующий код:

Создание кнопки загрузки, шаг 2
Создание кнопки загрузки, шаг 2

Шаг 2. Загрузите файл на свой сервер

Если вы хотите предложить файл для загрузки, вам нужно будет либо разместить его на своем собственном сервере, либо указать кнопку на файл в другом месте в Интернете. Используйте FTP-клиент, чтобы загрузить файл, который вы хотите сделать доступным на сервере вашего веб-сайта.

Создание кнопки загрузки Шаг 3
Создание кнопки загрузки Шаг 3

Шаг 3. Убедитесь, что у вас есть разрешение веб-мастера, если вы хотите создать ссылку на файл, который вы не размещаете самостоятельно

Создание кнопки загрузки Шаг 4
Создание кнопки загрузки Шаг 4

Шаг 4. Замените «Местоположение загрузки» URL-адресом для загрузки. Обязательно включите одинарные кавычки вокруг адреса, а также двойные кавычки вокруг «window.location = 'Download Location'». Включите любые префиксы, такие как HTTP: // или FTP: //, а также укажите расширение файла, например как-j.webp" />

Создание кнопки загрузки Шаг 5
Создание кнопки загрузки Шаг 5

Шаг 5. Обозначьте кнопку

Замените «Button Text» словами, которые должны появиться на кнопке. Убедитесь, что текст заключен в двойные кавычки. Делайте текст кнопки маленьким, чтобы кнопка не казалась большой и громоздкой на странице.

Создание кнопки загрузки Шаг 6
Создание кнопки загрузки Шаг 6

Шаг 6. Разместите код на своей странице

Вы можете вставить код кнопки в любом месте веб-страницы, и кнопка появится в этом месте. Загрузите измененный код веб-страницы и проверьте новую кнопку.

Метод 2 из 2: создание кнопки с изображением

Создание кнопки загрузки Шаг 7
Создание кнопки загрузки Шаг 7

Шаг 1. Создайте свою кнопку загрузки

Используйте предпочтительный редактор изображений и создайте кнопку, соответствующую стилю вашего веб-сайта. Вы можете сделать кнопку настолько маленькой или большой, насколько захотите.

Создание кнопки загрузки Шаг 8
Создание кнопки загрузки Шаг 8

Шаг 2. Загрузите файл на свой сервер и изображение кнопки

Если вы хотите предложить файл для загрузки, вам нужно будет либо разместить его на своем собственном сервере, либо указать кнопку на файл в другом месте в Интернете. Используйте FTP-клиент, чтобы загрузить файл, который вы хотите сделать доступным на сервере вашего веб-сайта.

Загрузите изображение кнопки в то же место на сервере, что и страница, на которую вы ее вставляете

Создание кнопки загрузки Шаг 9
Создание кнопки загрузки Шаг 9

Шаг 3. Создайте код загрузки

Кнопка загрузки, представленная изображением, работает так же, как и все остальные ссылки в HTML. Скопируйте следующий код в предпочитаемый вами редактор:

Создание кнопки загрузки. Шаг 10
Создание кнопки загрузки. Шаг 10

Шаг 4. Введите информацию о вашем файле и изображении. Замените «Местоположение загрузки» полным URL-адресом для загрузки, включая любые префиксы HTTP: // или FTP: //. Замените «Image File» на имя файла изображения кнопки загрузки. Если файл находится в том же месте, что и страница на вашем сервере, вам не нужно включать весь адрес.

  • Замените «Hover Text» любым текстом, который должен отображаться, когда пользователь наводит курсор на изображение.
  • Замените «X» и «Y» шириной и высотой изображения в пикселях соответственно.
  • Убедитесь, что каждая запись заключена в двойные кавычки.
Создание кнопки загрузки Шаг 11
Создание кнопки загрузки Шаг 11

Шаг 5. Введите код на свою страницу

Поместите код там, где вы хотите, чтобы ваша кнопка появилась. Загрузите новый код, а затем загрузите веб-страницу, чтобы убедиться, что кнопка работает. Убедитесь, что текст при наведении курсора загружается и изображение имеет правильный размер.

Видео - с помощью этой службы некоторая информация может быть передана YouTube

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

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

Рекомендуемые: