Автор:
Bobbie Johnson
Дата Створення:
6 Квітень 2021
Дата Оновлення:
1 Липня 2024
![Как в HTML сделать кнопку для скачивания файла вместо открытия в браузере | Уроки HTML, CSS](https://i.ytimg.com/vi/nxkOdsFb6nw/hqdefault.jpg)
Зміст
- кроки
- Метод 1 з 2: Створення кнопки на HTML
- Метод 2 з 2: Створення кнопки у вигляді картинки
- попередження
Кнопка для скачування допоможе вашому сайту виглядати набагато більш професійно в порівнянні з варіантом, де для скачування просто вказані посилання. Кнопка забезпечує більш зрозумілий інтерфейс, і якщо ви щось розробляєте самі, ваші кнопки можуть стати невід'ємною частиною дизайну сторінки. Дотримуйтесь цього керівництву, щоб створити кнопку на HTML або кнопку власної розробки.
кроки
Метод 1 з 2: Створення кнопки на HTML
1 Створіть кнопку в редакторі вихідного коду. Прекрасно підійде простий текстовий редактор на зразок Notepad або TextEdit. В текстовому редакторі введіть наступний код:
2 Завантажте файл на ваш сервер. Якщо ви хочете пропонувати файл для скачування, вам або доведеться зберігати його на вашому сервері, або зв'язати кнопку з якимось файлом десь ще в мережі. Використовуйте FTP-клієнт, щоб завантажити на сервер вашого сайту той файл, який хочете зробити доступним.
3 Переконайтеся, що у вас є права веб-майстра, якщо ви хочете посилатися на файл, який зберігається не у вас.
4Заменіте 'Download Location' на реальний URL-адресу для скачування. Обов'язково укладіть адреса в одинарні лапки, а "window.location = 'Download Location'" в подвійні лапки. Додайте префікси, наприклад HTTP: // або FTP: //, а також додайте розширення файлів, наприклад .webp або .EXE..
5 Зробіть напис на кнопці. Замініть "Button Text" на ті слова, які повинні бути на кнопці. Обов'язково вказуйте текст в подвійних лапках. Намагайтеся зробити фразу короткою, щоб кнопка на екрані не здавалося громіздкою.
6 Додайте вихідний код на своїй сторінці. Ви можете вставити вихідний код для кнопки в будь-якому місці сторінки, і кнопка з'явиться саме в тому місці. Завантажте ваш новий код сторінки і протестуйте вашу нову кнопку.
Метод 2 з 2: Створення кнопки у вигляді картинки
1 Намалюйте вашу кнопку для скачування. Використовуйте будь-який зручний для вас редактор зображень і намалюйте кнопку, яка підходить по стилю вашому сайту. Ви можете зробити кнопку настільки великий (або маленькою), наскільки побажаєте.
2 Завантажте файл і картинку з кнопкою на ваш сервер. Якщо ви хочете пропонувати файл для скачування, вам або доведеться зберігати його на вашому сервері, або зв'язати кнопку з якимось файлом десь ще в мережі. Використовуйте FTP-клієнт, щоб завантажити на сервер вашого сайту той файл, який хочете зробити доступним.
- Завантажте зображення кнопки в той же місце на сервері, де розташована сторінка, на яку ви цю кнопку додаєте.
3 Напишіть вихідний код для скачування. Кнопка для завантаження, зроблена у вигляді зображення, працює так само, як працюють всі інші посилання в HTML.Скопіюйте наступний код в ваш редактор:
4Введіте інформацію про фото і зображенні. Замініть "Download Location" на реальний URL-адресу для скачування, включаючи будь-які префікси HTTP: // або FTP: //. Замініть "Image File" на ім'я файлу зображення кнопки. Якщо файл на сервері розташований там же, де і сторінка, немає необхідності вказувати повний шлях.
- Замініть "Hover Text" на текст, який повинен з'являтися, коли користувач наводить курсор миші на зображення кнопки.
- Замініть "X" і "Y" на ширину і висоту зображення в пікселях відповідно.
- Обов'язково додавайте всі ці записи в подвійних лапках.
5 Введіть вихідний код на своїй сторінці. Додайте код там, де повинна з'явитися кнопка. Завантажте новий код і потім відкрийте свою веб-сторінку, щоб переконатися, що кнопка працює. Перевірте, що текст-підказка з'являється при наведенні курсору, а сама картинка правильного розміру.
попередження
- Ніколи не завантажуйте файли в порушення авторських прав, так як це може привести до великого штрафу або навіть тюремного ув'язнення.
- Набагато краще закачувати файли на ваш власний сервер і викладати їх потім в загальний доступ, ніж залежати від інших сайтів, на яких вони зберігаються. Якщо ви копіюєте посилання на розташування файлу з іншого сайту, створювана вами кнопка для скачування буде працювати тільки до тих пір, поки ця посилання залишається чинною. Вам доведеться періодично перевіряти працездатність кнопки або посилання на тому сайті, з якого ви її взяли, щоб переконатися, що користувачі при натисканні на кнопку зможуть завантажити файл, а не перейдуть по битою посиланням через те, що файл вже не існує.