Содержание
Те, кто работает в индустрии веб-дизайна, сравнивают разработку интерфейсного сайта с трехногой табуреткой. Эти три ноги — три уровня веб-разработки — составляют структуру, стиль и поведение.
Почему вы должны разделить слои?
Когда вы создаете веб-страницу, ее структура должна быть привязана к вашему 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 (объектная модель документа). Написание корректного HTML в слое контента важно для взаимодействия DOM на уровне поведения. Когда вы создаете слой поведения, вы должны использовать внешние файлы сценариев, как и в CSS, для оптимизации скорости и производительности.
