Творец Креатива

Твой первый сайт за несколько кликов!

Стать обладателем своего собственного, работающего сайта, возможно меньше чем за час, даже если до этого момента не знал из чего он состоит, что такое домен, что такое хостинг!

Сайт в 2019 году может понадобиться для любых целей и нужд. Например нужна рекламная страница для бизнеса? Легко! Хочешь разместить свои фото не в соцсетях, а на сайте? Легко

Всего несколько шагов:

  • Находим шаблон
  • Изменяем
  • Устанавливаем на хостинг
  • Прикручиваем домен
  • Хвастаемся перед друзьями

Находим шаблон

Итак, мы знаем для чего нам нужен сайт и как примерно он должен выглядеть...
Например я фотограф, мне нужен сайт где я смогу выкладывать свои работы.
Для поиска нужного шаблона, вводим в любом поисковике фразу: "landing page free download" - "скачать лендинг бесплатно", для поиска одностраничного сайта. Если вам нужен сайт с несколькими страницами, то вместо лендинга, пишите "скачать сайт бесплатно".

img поиск шаблона

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

img скачивание шаблона

Изменяем сайт под себя

Мы скачали архив с сайтом. Распаковываем его. Внутри находятся несколько папок и файлов - это и есть сайт.

Меняем изображения

По сути, для простого сайта, там есть лишние файлы, но сейчас мы это пропустим.
Нас интересует только папка "img" или "images" - папка с фотографиями, и файл index.html - страница нашего лендинга. Если вы скачали сайт, то будет несколько страниц с расширением .html .

img лендинг

Кликаем - открываем с помощью браузера файл index.html и смотрим, что нам нужно изменить.
С фотографиями проще всего, открываем папку "img" или "images", и меняем фотографии в папке на свои. Только названия фото должны быть как у удаляемых фото и размер такой же, и если удаляете png, то заменить её нужно на png!
Например мы видем фото на весь экран, в верху сайта, когда только открываем его. Заходим в папку "img", находим это фото. У меня это bg-masthead.jpg (JPEG), значит я беру фото и меняю его размер на такой же, если у меня png, открываю через photoshop или paint и выбираю "сохранить как", и сохраняю как файл jpg. Меняю сохраненному фото название на bg-masthead, перезагружаю страницу, и если всё сделано правильно, то появится моё фото, а если неправильно, то ничего не появится.

img фото

Изменяем текст в коде

Теперь переходим к тексту и ссылкам. Нам нужен редактор кода. Можно всё сделать в блокноте, но это очень неудобно, по этому пишем в поисковике "Sublime Text 3", и скачиваем. Это небольшая програмка по весу, всего 8 мегабайт. Устанавливаем. Запускаем и перетаскиваем в окошко программы файл index.html, появится вот такая цветная структура кода:

img html разметка

Тут вообще всё очень просто! Смотрите какие тексты есть на сайте, находите в коде - они выдлелены белым цветом, и меняете на ваш текст.

img редактирование текста
img редактирование текста
img редактирование текста