Создание сайта.
Популярные статьи.
Контейнерный веб-дизайн или как применять тег DIV и SPAN
Категория: CSS. Нет комментариев. Опубликовано: 30.07.2012. 
Здравствуйте, сегодня мы поговорим о том какие виды дизайна существуют и обсудим их достоинства и недостатки а также мы более конкретно остановимся на контейнерном веб-дизайне и рассмотрим как можно применять его на практике. За всю историю существования интернета было несколько видов дизайна и среди которых: текстовый, фреймовый, табличный дизайн и современный блочный дизайн. Ниже я подробно расскажу про каждый из видов дизайна.
Текстовый веб-дизайн.
Текстовый дизайн самый старый из всех перечисленных и он представляет собой просто кусок текста, отформатированного при помощи тегов абзаца, с размещенными на нем таблицами и другими текстовыми элементами.
Достоинством такого вида дизайна можно назвать только то, что такие страницы очень просто создавать и они быстро загружаются в браузерах. А вот недостатков очень много и среди которых это очень бедный вид станицы с таким дизайном, на котором размещена информация. На такой странице нету возможности произвольного размещения элементов на странице а все они должны идти один за другим по очереди. Также существенным недостатком является то, что нам нужно для каждой страницы создавать отдельный дизайн, нету возможности динамически подгружать форматирование и за счет чего нету возможности сократить нагрузку на сервер.
Фреймовый веб-дизайн.
Дизайн на фреймах это был следующий шаг в дизайне и представлял собой страницу, на которую с определенной страницы будет подгружаться разного рода оформление и тем самым можно было снизить нагрузку на сервер.
После того как был использован этот метод то положительный эффект не заставил себя ждать и скорость загрузки моментально увеличилась в несколько раз. Также благодаря фреймам можно было очень удобно пользоваться оформлением сайта.
Фреймы сняли некоторые проблемы при создании страниц но тут появилась очень серьезная проблема: фреймы не сертифицированы по международным стандартам и поэтому в каждом браузере страница будет отображаться по разному. Различия были не кардинальные, но это часто заводит дизайнеров в тупик и с начался поиск решений для выхода с сложившейся ситуации.
Табличный дизайн.
После того как стало ясно что фреймовый дизайн не состоятелен то было принято решение создавать сайты на таблицах. Такой метод имел два важных свойства: таблицы это стандартная команда в языке HTML и был стандартизирован на мировом уровне а также то что все ячейки таблицы можно объединять и редактировать с помощью атрибутов или таблиц стилей.
Были также и недостатки у табличного дизайна. Первое это монолитность дизайна, то есть в одном файле содержался полностью весь код начиная от заголовка и заканчивая копирайтом. Также если нужно было создать сложный дизайн то код был очень запутан и это создавало определенные проблемы при редактировании и наполнении сайта.
Контейнерный дизайн.
Контейнерный дизайн это идеальный вариант в наше время и сейчас мы посмотрим почему такая ситуация. Контейнерный дизайн содержит в себе не только стандартные теги языка HTML но и может содержать в себе подгружаемые элементы с таблиц стилей и что заметно снижает размер файла и тем самым очень сильно увеличилась скорость загрузки страниц.
Также все теги и стили для дизайна стандартизированы и поэтому сайт будет отображаться правильно во всех браузерах и вопрос кроссбраузерности не волнует специалистов.
Но и не обошлось без замечаний к такому виду дизайна. Для того чтобы создать очень сложный дизайн нужно применять большую вложенность тегов и тем самым можно запутать как себя так и других специалистов, которые будут корректировать дизайн после вас и это единственный недостаток по которому контейнерный дизайн уступает табличному.
Как создать контейнер для сайта или применение тега DIV и SPAN.
Для контейнерного дизайна существуют только два основных тега при помощи которых вы сможете создать блоки сайта а также разукрасить все это после того как будет все готово. Сначала давайте рассмотрим что такое за тег DIV и для чего он нам нужен.
Тег DIV представляет собой блочный элемент который без дополнительных параметров в файле стилей не виден и за счет чего он получил такую популярность. Нужно просто создать каркас с тегов и уже после этого можно разукрасить и расположить блоки так, как вам нужно. Тег DIV парный тег и для того чтобы создать нужный вам блок просто нужно задать конструкцию:
<div></div>
После того как создана такая конструкция на странице будет выделено место для блока, которое мы можем увидеть только после того как заполним его. Размеры блока будут иметь в ширину полностью все окно а высота в зависимости от того как и чем мы его заполним.
Атрибуты для тега DIV.
Для того чтобы можно было к конкретному тегу прописать команды в файле стилей вам нужно применить атрибуты среди которых самые распространенные это id и class давайте сначала я покажу как нужно применять такие атрибуты для блоков.
Атрибут id: <div id="уникальное название для блока"></div>
Атрибут class:<div class="уникальное название для блока"></div>
Теперь давайте разберемся какая разница между этими двумя атрибутами. Функцию они выполняют одинаковые но только атрибут class с одинаковым идентификатором можно применять сколько угодно раз в то время как id только один и поэтому я всегда использую атрибут class.
Тег SPAN.
Тег SPAN почти полная копия DIV по свойствам, так же само можно применять атрибуты, красить с помощью таблиц стилей но есть очень существенное и важное отличие-тег не создает блока и тем самым его можно применять как внутри тега DIV так и внутри даже целого текста, не будет никаких сдвигов оформления или разрывов строки.
Теперь давайте на дизайне своего сайта я покажу где и какой тег я применял при верстке.
Как видите для того чтобы создать каркас сайта нужно просто все области сайта разбить на блоки и после этого можно смело верстать сайт.
С уважением, Василенко Александр
