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