Сделать сайт самому

Вы здесь: Главная

На данный момент сделать сайт самому не представляет никакой абсолютно сложности. И в этой статье я хочу вам предоставить возможность создать сайт на универсальной основе, т.е. ваш сайт помимо того, что правильно будет отображаться во всех основных браузерах, он ещё будет подстраиваться под абсолютно любое разрешение экрана пользователя, да плюс автоматически подгоняться под планшеты и мобильные устройства, что не мало важно при нашей ситуации - когда всё больше и больше людей используют данные приложения. А называется такой сайт - Responsive.

В состав готовый сайт входят стилевые файлы и Java скрипты, которые наполнены всем необходимым (на все случаи жизни), чтобы вы могли внедрять в свой сайт всевозможные изменения и дополнения, т.е. сделать свой сайт так, как этого хочется вам.

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

Для тех, кто совсем не имеет никаких познаний и представлений о таких кодах, предлагаю пройти моментальный курс - Обучение HTML в онлайн режиме.
А если вы совсем не хотите с этим просто связываться, то можете воспользоваться Конструктором сайтов, в котором вам совсем не нужно знать никаких языков программирования, и где сайт создаётся за считанное время по готовым или сделанному лично вами шаблонам. Источник: age-dragon.com

Как создать резиновый сайт - Responsive

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

И теперь о главном - Как создать сайт Responsive совершенно бесплатно и своими руками.

Далее мы начнём рассматривать сайт с двумя колонками в Пример 1, и вы так же можете открыть index.html из скаченного архива (одинаковая информация) и редактируя вносить изменения.

Меню сайта

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

Для изменения общего фона меню откройте стилевой файл bootstrap.css и на 2733 строке в параметрах background-image измените цветовой колор, где первый цвет градиента верхний, а второй соответственно нижний. Сразу скажу - в этом файле так же уже задействованы настройки для многоуровневого меню.

И тоже самое, для изменения цвета пунктов меню: активное и при наведение, откройте стилевой файл style.css, где на 41 строке вы меняете цвет активного пункта меню, а на 52 строке при наведение мыши.

Далее мы будет разбирать, как меню сделать скролированным (не зафиксированным), и поместить его например, после шапки Пример 2. Кстати в этом примере уже показан резиновый сайт с тремя колонками, который делается так же быстро (но, об этом позже). Вся информация по изменению меню находится на соответствующей странице - Меню сайта Responsive.

Шапка сайта

Переходим к шапке сайта. В данном случае здесь используются два рисунка: это фон шапки и логотип сайта. Вы же в шапку можете добавить что-то своё (например баннер), или изменить логотип-рисунок на текстовую информацию о сайте. Редактируется шапка в style.css в параметре header. Или вообще за ненадобностью вы можете удалить данный блок.

Блоки сайта

Теперь мы перейдём к блокам (колонкам) сайта. И здесь очень просто изменить расположение, или добавить любое количество колонок (блоков). И я вам сейчас это докажу. В нашем файле index.html (откройте его через текстовый редактор) вы наверняка заметили, что основной контент начинается с блока <div class="span8">, а правый блок (sidebar) c <div class="span4">. Так вот эти все блоки уже прописаны в стилевом файле bootstrap.css, где вы можете посмотреть воочию какие параметры имеет каждый блок. И вы можете либо в index.html файле проставить нужный span по его ширине, либо изменить span на необходимую ширину непосредственно в стилевом файле.

Подвал сайта

Для изменения фона подвала откройте файл style.css и почти в самом конце в параметре footer для background сделайте необходимые изменения. А текстовая информация изменяется в том же блоке только в index.html

Фон сайта я здесь описывать не буду, потому как обширная информация об этом написана на отдельной странице Фон для сайта

И так же все остальные дополнительные параметры как: blockquote, pre, fieldset, hr и многое-многое другое я тоже здесь рассматривать не буду, так как во-первых займёт очень много места, а во-вторых, это далеко не всем потребуется. Кому нужно, тот все дополнительные настройки посмотрит в файле bootstrap.css. Вы сами увидите, сколько их там много.

В итоге вы имеете скачанные файлы, в которых вы замените свою текстовую информацию и фото на свои, подредактируете под свой стиль и дизайн оформление блоков, шапки, меню и фона, и ваш сайт готов буквально за считанное время и абсолютно бесплатно.
На этом всё! Что не понятно спрашивайте!
Источник: age-dragon.com

Поделись ссылкой с друзьями: