В этой статье мы коротко рассмотрим, как создать сайт с нуля бесплатно самому. Инструкция предназначена не для специалиста и предплагает использование Бутстрапа.
Редактирование шаблона и index-страница
Чтобы отредактировать шаблон, необходимо его выбрать и скачать. Обычно шаблоны предоставляются в архивах.
Разархивируйте и найдите папку с набором файлов. Главная страница сайта называется index.html. Также важными файлами и папками являются images, css.
Откройте индексную страницу в блокноте Notepad++. Параллельно откройте в браузере, чтобы смотреть изменения. В блокноте смотрите на черный цвет. Это текст, который можно как угодно под себя менять.
Картинки и логотип
Иллюстрации лежат в папке img или images. Чтоб поменять картинку, нужно назвать свою так же и заменить, удалив ненужную. Важно, чтобы навание полностью совпадало.
У каждого сайта должен быть логотип и фавикон. Логотип создается с помощью графических редакторов таких как фотошоп или Corel Draw.
Можно использовать для логотипа сайт Logaster.
Блоки DIV и CSS
Страницы сайта состоят из блоков DIV. Они предсталяют собой независимые прямоугольники, в которых содержится контент. В одном блоке могут быть размещены другие блоки.
Чтобы поменять блоки местами, нужно вырезать код одного блока и переставить в другое место. Также блоки можно удалить. Главное, правильно вырезать.
Стили css создают оформление сайта. Это размеры, цвета, шрифты, весь дизайн, кроме графики. Стили подключаются к тегам html. Их можно менять.
Пример: к тегу div id=”phone” можно подключить черный цвет {color:#000}
Bootstrap
Бутстрап помогает создавать сайты быстрее. Он очень популярен. Стили этой верстки заранее продуманы и их названия достаточно просто прописать к тегам. Например, в бутстрапе разделение на столбцы выглядит так:
Col-lg-6 col-md-6 col-xs-12.
В этой записи указаны размеры экрана (большой, средний, маленький) и ширина столбца. 12 – полная строка, а 6 – половина.
Мобильная версия при использовании бутстрапа создается автоматически. На мобильном экране все размеры выстраиваются в 100%.
Смена дизайна
Чтобы то-то изменить в дизайне, нужно поменять стили. Нажмите на элемент правой мышкой и выберите «посмотреть код» (исследовать элемент). Там можно сменить стиль и увидеть, как это будет смотреться. Потом нужно изменение внести в файле стилей.
Шрифты и иконки
Для смены шрифтов используют сервисы «google fonts” и “ Fontstorage” Шрифты не сменятся, если не подключить их к сайту строкой кода.
Иконки часто в шаблонах названы fa fa-address-book. Чтоб поставить свою иконку, воспользуйтесь сайтом fontawesome ru. Там вверху есть раздел «Иконки». Возьмите код нужной иконки и замените на сайте.
Чтобы узнать все теги и стили, нужно всего лишь вбить запрос в поиск или поискать на сайтах тиа htmlbook.
Как создать сайт бесплатно самому без изменений
Многие решают делать сайты на консрукторах типа Тильда или Викс. Там меньше возожностей, но проще. К сожалению, такие сайты плохо продвигатся. Лучше выбирать движки.
Можно ничего не менять в коде и пользоваться скачанным шаблоном, но тогда сайт не будет уникальным.
Теперь шаблоны вордпресс усовершенствовались и стало много автоматики, в шаблонах есть варианты дизайнов и структур, причем в бесплатных версиях. Они разделены по типам сайтов. Можно подобрать под тематику и под размер.
К сожалению, не все шаблоны корректно отображают сайт и не все удобны. В некоторых не хватает важных элементов. Понятное дело, что в шаблонах много лишнего кода, но если возможности нанять разработчика нет, то и это рабочий вариант.
Бутстрап часто используют сами разработчики, чтоб облегчить себе задачу. Он также добавляет кода и несколько замедляет сайт, хотя структурирует действительно удобно и адаптивно.
Прочитав несколько обучающих статей в интернете, вы можете легко создать сайт самостоятельно бесплатно по готовому шаблону.
