От автора: в создании любой вещи, будь то стол, автомобиль или сайт, есть какая-то технология. Но наш портал не выступает в роли столярного справочника или автомобильного журнала, поэтому мы будем разбираться, что такое технология создания веб сайта на html.
Рис. 1. Такие шаги можно выделить в создании сайта.
Как создается сайт
Сразу же скажу, что сайт можно создать по-разному (с помощью движков, конструкторов), но я не зря уже дважды упомянул в тексте слово “html”. Да-да, именно с него все начинается. HTML – это язык, с помощью которого уже более двадцати лет создаются веб-сайты. Это самый главный строительный материал для нашего ресурса.
Вообще если говорить о создании профессионального проекта, то работу над ним всегда начинает веб-дизайнер. Это человек, который рисует внешний вид будущего шаблона в графичеком редакторе. На выходе мы получаем завершенный файл psd, который содержит все слои с необходимыми графическими элементами (например, логотип, иконки и прочие декоративные элементы).
После этого работу продолжает верстальщик, который должен вдохнуть в жизнь красивую картинку, превратив ее в реальный шаблон с сохранением дизайна, нарисованного в макете. Для этого он активно использует языки HTML и CSS, на которых стоит все сайтостроение. В первую очередь, конечно, html, потому что это язык разметки гипертекста и без него невозможно создание абзацев, таблиц, изображений и вообще всего, без чего мы не можем себе представить современный интернет.
Обычно верстальщик создает несколько html-файлов (для разных страниц сайта, которые отличаются дизайном и структурой). А таблица стилей css обычно создается одна. Ее подключают ко всем страничкам и записывают в нее все правила, которые влияют на внешний вид элементов.
Работа с html и css
Я уже немного описал, как выглядит технология создания сайта html. Дальше вся работа происходит в этих нескольких файлах (в html-файлах и общей таблице стилей). Сначала прописывается служебная информация, вроде кодировки, метатегов, заголовка и т.д.
После этого формируется тело страницы. Содержащаяся в этом теге информация и будет выведена на экран. Сначала верстальщик создает основные блоки. Их количество зависит от макета. Стандартный набор: шапка, основная часть из двух-трех колонок и самый нижний блок. В процессе работы вертальщик может использовать любой из способов верстки, но зачастую от него требуется создать все на современных технологиях, адаптировав еще и под старые браузеры.
На самом деле единой технологии в создании сайта не существует. В html его можно сделать таблицами, на фреймах, с помощью блоков (чаще всего), с применением семантических элементов HTML5 и т.д. Сегодня в основном требуется последний вариант, так как это самый современный способ.
Фреймы – совсем уж старый и неудачный эксперимент. Таблицы – все еще возможный путь создания, но чаще всего с их помощью выводят именно табличные данные, а не сайт полностью. Блочная верстка (div + HTML 5 элементы) является самой основной сегодня.
Собственно, процесс создания очень простого сайта на блоках вы можете отследить в этих трех статьях (дать ссылки на те статьи, где разрабатывается простой шаблон). С табличной версткой вы можете познакомиться здесь (ссылка на статью о табличной верстке).
Доработка сайта
После того, как верстка сайта выполнена, ее обычно еще длительное время дорабатывают. Дело в том, что в процессе верстке могло накопиться определенное количество ошибок. Эти ошибки необходимо исправить. Если это необходимо, нужно сделать шаблон кроссбраузерным и адаптивным.
Также любой веб-разработчик стремится к порядку и не желает иметь в своем проекте ничего лишнего. Все изображения, шрифты и скрипты, применяемые при верстке проекта, необходимо разложить по папочкам и прописать к ним правильные пути.
На финальном этапе доработки из проекта удаляются все лишние свойства и теги. Обычно на сервере все файлы сжимают, чтобы они быстрее передавались по сети. Мелкие картинки объединяют в один большой спрайт. Эти меры способствуют значительному увеличению скорости сайта.
Перед тем, как выложить сайт на просторы сети, его проверяют на ошибки. Многие проблемы исправляют уже непосредственно на рабочем проекте. Это является вполне нормальным явлением.
Конечно же, сегодня мало кто использует статические сайты на html, потому что добавлять информацию на такой ресурс очень неудобно. Поэтому после того, как верстка шаблона полностью завершена, работа отнюдь не заканчивается. Следующий этап во многом сложнее. Это посадка, интеграция, натяжка (называйте как хотите) шаблона на одну из популярных CMS. Чаще всего на WordPress или Joomla, так как это самые популярные движки.
Рис. 2. Это wordpress и на нем сегодня делается подавляющее большинство сайтов.
На нашем блоге есть подробные видеокурсы, в которых описана технология создания сайта под эти движки.
Итог
Примерно так и выглядит технология создания веб-сайта на html. Конечно, в этой статье каждый шаг не описан подробно, но пошагово пройти все этапы можно с помощью других материалов на нашем сайте, даже если вы пока абсолютный ноль в сайтостроении.
Подписывайтесь на наш онлайн-журнал, потому что это уникальное место в сети, предлагающее вам огромное количество материала по сайтостроению.
