Те, кто работает в индустрии веб-дизайна, сравнивают внешний дизайн веб-сайта с трехногим стулом. Эти три ноги - три слоя веб-разработки - включают структуру, стиль и поведение.
Почему вы должны разделять слои?
Когда вы создаете веб-страницу, ее структура должна быть отнесена к вашему HTML, визуальным стилям в CSS и поведениям для скриптов. Некоторые из преимуществ разделения слоев:
- Общие ресурсы: Когда вы пишете внешний файл CSS или JavaScript, любая страница на сайте может использовать этот файл. Если вам нужно внести изменения в этот файл, возможно, чтобы обновить некоторые типографские стили на веб-сайте, каждая страница, использующая эту таблицу стилей, получит изменения. Нет необходимости редактировать каждую страницу веб-сайта по отдельности, что может быть изнурительным начинанием для большого веб-сайта.
- Более быстрая загрузка: Как только сценарий или таблица стилей была загружена вашим клиентом в первый раз, он кэшируется веб-браузером. Поскольку эти общие ресурсы теперь содержатся в кеше браузера, другие страницы, которые запрашиваются в браузере, загружаются быстрее, что повышает общую скорость и производительность страницы.
- Многопользовательские команды: Если у вас одновременно работает более одного человека на веб-сайте, вы можете использовать системы, позволяющие проверять файлы в каждом из них, чтобы гарантировать, что все работают с последними версиями. Это гораздо сложнее сделать, если стили и поведения переплетаются со структурными документами.
- SEO: Сайт, который имеет четкое разделение стиля и структуры, скорее всего, будет лучше работать для поисковых систем, поскольку они могут более эффективно сканировать этот контент и понимать страницу, не увязнув в визуальном стиле и информации о поведении.
- Доступность: Внешние таблицы стилей и файлы сценариев более доступны для людей и для браузеров. Программное обеспечение, такое как устройства чтения с экрана, может более легко обрабатывать контент из структурного уровня без использования стилей, которые они не могут использовать в любом случае.
- Обратная совместимость: Сайт, который разработан с отдельными уровнями разработки, скорее всего, будет обратно совместимым, поскольку браузеры и устройства, которые не могут использовать определенные стили CSS или которые имеют отключенный JavaScript, все еще могут просматривать HTML. Затем вы можете постепенно расширять свой сайт с помощью функций для браузеров, которые их поддерживают.
HTML: Структурный слой
Структура или контентный слой веб-страницы является основным HTML-кодом этой страницы. Подобно тому, как каркас дома создает прочную основу, на которой строится остальная часть дома, прочная основа HTML создает платформу, на которой может быть создан веб-сайт.
Структурный уровень - это место, где вы храните все содержимое, которое ваши клиенты хотят прочитать или посмотреть. Структура HTML может состоять из текста и изображений и включает гиперссылки, которые посетители будут использовать для навигации по сайту. Это кодируется в стандартном HTML5 и может включать в себя текст, изображения и мультимедиа (видео, аудио и т. Д.).
Каждый аспект содержимого сайта должен быть представлен в структурном слое. Это позволяет клиентам, у которых отключен JavaScript, или которые не могут просматривать CSS-доступ ко всему веб-сайту, если не все его функции.
CSS: Стили слоя
Этот слой определяет, как структурированный HTML-документ будет выглядеть для посетителей сайта и определяется CSS (каскадные таблицы стилей). Эти файлы содержат стилистические инструкции о том, как документ должен отображаться в веб-браузере. Уровень стиля обычно включает медиа-запросы, которые изменяют отображение сайта на основе размера экрана и устройства.
Все визуальные стили для веб-сайта должны находиться во внешней таблице стилей. Вы можете использовать несколько таблиц стилей, но помните, что для каждого файла CSS требуется HTTP-запрос для его получения, что влияет на производительность сайта.
JavaScript: уровень поведения
Поведенческий уровень делает сайт интерактивным, позволяя странице реагировать на действия пользователя или изменять на основе набора условий. JavaScript является наиболее часто используемым языком для слоя поведения, но CGI и PHP очень часто используются.
Когда разработчики ссылаются на уровень поведения, большинство из них означает уровень, который активируется непосредственно в веб-браузере. Вы используете этот слой для непосредственного взаимодействия с DOM (Document Object Model). Написание допустимого HTML на уровне контента важно для взаимодействия DOM на уровне поведения. Когда вы строите слой поведения, вы должны использовать внешние файлы сценариев, как и для CSS, для оптимизации скорости и производительности.
