Как сделать сайт, используя скачанный HTML шаблон

HTML шаблон на мониторе, планшете и смартфоне

Вы скачали с нашего сайта HTML шаблон и хотите сделать сайт на его основе? В этом руководстве мы с вами последовательно пройдём все нужные этапы:

  • Найдём скачанный шаблон на диске.
  • Разархивируем его.
  • Просмотрим структуру сайта и поймём, какие файлы за что отвечают.
  • Отредактируем содержимое шаблона. Поменяем стандартный текст заголовков, меню на тот, который нужен нам.
  • Опубликуем сайт на выбранном хостинге.

Скачивание

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

Шаблон автоматически скачается в папку “Загрузки” вашего компьютера в виде архива myresume.zip.

Разархивирование шаблона

Чтобы начать работу с шаблоном, вам нужно разархивировать его. Это означает извлечь файлы из архива myresume.zip, чтобы вы могли работать с ними отдельно.

  • Щелкните правой кнопкой мыши на архиве с шаблоном и выберите опцию “Извлечь” или “Разархивировать”. Укажите место, куда вы хотите извлечь файлы, например, на рабочий стол или в папку “Мои документы”.

Извлечение архива

  • Выберите любое удобное место на диске для разархивирования файлов, нажмите кнопку “ОК” или “Извлечь”, и система начнет процесс разархивирования.
  • Подождите несколько секунд, пока система извлечет все файлы.
  • Когда разархивирование завершится, перейдите в папку, в которую разархивировались файлы.

Структура шаблона

Зайдя в папку MyResume, мы видим следующие файлы:Структура папки myresume

  • Файл assets содержит в себе папки с картинками img, стилями css, javascript-кодом js.
  • Файл forms — код формы обратной связи.
  • Файл index.html – основной файл, который нас интересует. Щёлкните правой кнопкой мыши по нему, выберите “Открыть с помощью” и выберите браузер из списка программ. Вы увидите сайт, работающий локально, только в вашем компьютере.

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

Изменение шаблона под свои нужды

Глядя на открывшийся сайт, становится очевидно, что нам понадобится, как минимум, заменить имя и фамилию на свою, вставить своё фоновое фото или убрать фото мужчины с оригинала, а также поменять ссылки соцсетей на свои.Оригинал сайта

  • Открываем файл index.html с помощью любого текстового редактора. Например, можно использовать стандартный Блокнот или Notepad++. Видим HTML-код:

HTML код

 

  • Общий принцип такой: любой текст, картинка, ссылка, которые вы хотите на сайте изменить, находятся где-то в файлах шаблона. Например, нам нужно сменить Brandon Johnson на Иван Карпов, а красиво меняющиеся профессии Брендона (Designer, Developer, Freelancer, Photographer) на Дизайнер, Разработчик, Фрилансер, Фотограф.
  • Нажимаем Ctrl + F, вписываем в поиск “Brandon Johnson” и находим строчки кода, которые выводят имя и фамилию.

Hero Section в HTML коде

  • Удаляем в коде Brandon Johnson, пишем Иван Карпов.
  • Чуть ниже видим строку, которая выводит профессии. Удаляем I`m, пишем Я. Удаляем Designer, Developer, Freelancer, Photographer, пишем в то же место Дизайнер, Разработчик, Фрилансер, Фотограф.
  • Сохраняем изменения в коде, нажав Ctrl + S, обновляем вкладку с сайтом в браузере и видим наши изменения. По такому же принципу меняется любой текст на сайте.

Изменённый сайт

  • А удалив фото мужчины из папки /assets/img и обновив вкладку, мы получим сайт с пустым фоном:

Сайт с пустым фоном

  • Или, к примеру, вы хотите удалить раздел Testimonials целиком. На сайте вы видите, что он располагается между разделами Services и Contact.

Раздел Testimonials

  • В коде того же файла index.html найдите раздел Testimonials и удалите его целиком, с 551 строчки кода по 632. Сохраните файл, обновите вкладку — и раздела Testimonials в вашей копии сайта больше нет.

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

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

Хостинг

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

Мы рекомендуем качественный и надёжный хостинг Timeweb, мы пользуемся им сами уже давно и вполне довольны. Выберите “Виртуальный хостинг”.

Для небольшого шаблона сайта-визитки хватит самого дешёвого тарифного плана. А ещё вы сэкономите на домене — хостинг даёт его в подарок.

Тарифные планы хостинга Таймвеб

После регистрации и оплаты вам пришлют доступы для загрузки ваших изменённых под себя файлов шаблона на сервер. Советуем делать перенос с помощью программы FileZilla.

Хостинг Timeweb отличается профессиональной и дружелюбной техподдержкой, которая ответит на любые вопросы и поможет с переносом, бесплатными доменом и ssl-сертификатом.

Поделиться с друзьями
Adblock
detector