Як зробити кнопку для скачування

Автор: Bobbie Johnson
Дата Створення: 6 Квітень 2021
Дата Оновлення: 1 Липня 2024
Anonim
Как в HTML сделать кнопку для скачивания файла вместо открытия в браузере | Уроки HTML, CSS
Відеоролик: Как в HTML сделать кнопку для скачивания файла вместо открытия в браузере | Уроки HTML, CSS

Зміст

Кнопка для скачування допоможе вашому сайту виглядати набагато більш професійно в порівнянні з варіантом, де для скачування просто вказані посилання. Кнопка забезпечує більш зрозумілий інтерфейс, і якщо ви щось розробляєте самі, ваші кнопки можуть стати невід'ємною частиною дизайну сторінки. Дотримуйтесь цього керівництву, щоб створити кнопку на HTML або кнопку власної розробки.

кроки

Метод 1 з 2: Створення кнопки на HTML

  1. 1 Створіть кнопку в редакторі вихідного коду. Прекрасно підійде простий текстовий редактор на зразок Notepad або TextEdit. В текстовому редакторі введіть наступний код:
  2. 2 Завантажте файл на ваш сервер. Якщо ви хочете пропонувати файл для скачування, вам або доведеться зберігати його на вашому сервері, або зв'язати кнопку з якимось файлом десь ще в мережі. Використовуйте FTP-клієнт, щоб завантажити на сервер вашого сайту той файл, який хочете зробити доступним.
  3. 3 Переконайтеся, що у вас є права веб-майстра, якщо ви хочете посилатися на файл, який зберігається не у вас.
  4. 4Заменіте 'Download Location' на реальний URL-адресу для скачування. Обов'язково укладіть адреса в одинарні лапки, а "window.location = 'Download Location'" в подвійні лапки. Додайте префікси, наприклад HTTP: // або FTP: //, а також додайте розширення файлів, наприклад .webp або .EXE..
  5. 5 Зробіть напис на кнопці. Замініть "Button Text" на ті слова, які повинні бути на кнопці. Обов'язково вказуйте текст в подвійних лапках. Намагайтеся зробити фразу короткою, щоб кнопка на екрані не здавалося громіздкою.
  6. 6 Додайте вихідний код на своїй сторінці. Ви можете вставити вихідний код для кнопки в будь-якому місці сторінки, і кнопка з'явиться саме в тому місці. Завантажте ваш новий код сторінки і протестуйте вашу нову кнопку.

Метод 2 з 2: Створення кнопки у вигляді картинки

  1. 1 Намалюйте вашу кнопку для скачування. Використовуйте будь-який зручний для вас редактор зображень і намалюйте кнопку, яка підходить по стилю вашому сайту. Ви можете зробити кнопку настільки великий (або маленькою), наскільки побажаєте.
  2. 2 Завантажте файл і картинку з кнопкою на ваш сервер. Якщо ви хочете пропонувати файл для скачування, вам або доведеться зберігати його на вашому сервері, або зв'язати кнопку з якимось файлом десь ще в мережі. Використовуйте FTP-клієнт, щоб завантажити на сервер вашого сайту той файл, який хочете зробити доступним.
    • Завантажте зображення кнопки в той же місце на сервері, де розташована сторінка, на яку ви цю кнопку додаєте.
  3. 3 Напишіть вихідний код для скачування. Кнопка для завантаження, зроблена у вигляді зображення, працює так само, як працюють всі інші посилання в HTML.Скопіюйте наступний код в ваш редактор:
  4. 4Введіте інформацію про фото і зображенні. Замініть "Download Location" на реальний URL-адресу для скачування, включаючи будь-які префікси HTTP: // або FTP: //. Замініть "Image File" на ім'я файлу зображення кнопки. Якщо файл на сервері розташований там же, де і сторінка, немає необхідності вказувати повний шлях.
    • Замініть "Hover Text" на текст, який повинен з'являтися, коли користувач наводить курсор миші на зображення кнопки.
    • Замініть "X" і "Y" на ширину і висоту зображення в пікселях відповідно.
    • Обов'язково додавайте всі ці записи в подвійних лапках.
  5. 5 Введіть вихідний код на своїй сторінці. Додайте код там, де повинна з'явитися кнопка. Завантажте новий код і потім відкрийте свою веб-сторінку, щоб переконатися, що кнопка працює. Перевірте, що текст-підказка з'являється при наведенні курсору, а сама картинка правильного розміру.

попередження

  • Ніколи не завантажуйте файли в порушення авторських прав, так як це може привести до великого штрафу або навіть тюремного ув'язнення.
  • Набагато краще закачувати файли на ваш власний сервер і викладати їх потім в загальний доступ, ніж залежати від інших сайтів, на яких вони зберігаються. Якщо ви копіюєте посилання на розташування файлу з іншого сайту, створювана вами кнопка для скачування буде працювати тільки до тих пір, поки ця посилання залишається чинною. Вам доведеться періодично перевіряти працездатність кнопки або посилання на тому сайті, з якого ви її взяли, щоб переконатися, що користувачі при натисканні на кнопку зможуть завантажити файл, а не перейдуть по битою посиланням через те, що файл вже не існує.