Основы построения web-страниц: табличный дизайн, каскадные стилевые таблицы CSS как основа современного дизайна.

Таблицы являются удобным инструментом для выравнивания блоков. В html таблица делится на строки, которые в свою очередь делятся на ячейки, таким образом можно создавать неограниченное количество строк с неограниченным числом ячеек в каждой. Ячейки таблицы имеют особые настройки выравнивания, которые не встречаются более в других элементах. Это значит, что некоторые элементы дизайна крайне сложно сверстать без использования таблиц.

Метод табличной верстки получил широкое распространение во времена, предшествовавшие появлению стандарта CSS, так как на тот момент не было другой простой возможности точно расположить элементы на странице. Таблицы же, за счет того, что автоматически изменяют свой размер в соответствии с содержимым, а также за счет возможности, напротив, задать точные размеры той или иной ячейки, позволяют быстро и удобно расставить иллюстрации к тексту или совместить несколько частей коллажа в одно большое изображение. Кроме того, таблицы в HTML могут быть вложенными, что позволяет создавать целые иерархии таблиц, что было очень удобно при верстке сложных страниц, отдельные элементы которых должны были бы сохранять своё положение и размер на экране вне зависимости от размера окна браузера, тогда как другие элементы, напротив, должны были изменяться в размерах и/или изменять своё местоположение относительно остальных объектов документа.

Недостатком табличного подхода является отрисовка таблицы. До тех пор, пока не будет загружен закрывающий тег таблицы она и всё её содержимое не будет показано. Что является критичным при обрыве связи и медленном соединении. Всё это приводит к тому, что табличная верстка вызывает ненужные задержки вывода информации в браузере.

Рост количества таблиц повышает шанс возникновения ошибок при вёрстке, увеличивает размер документов и снижает скорость загрузки файлов.

Кроме того, использование таблиц для целей оформления не соответствует концепции семантичной вёрстки, подразумевающей использование элементов (тегов) в соответствии с их смыслом, семантическим значением. Элемент <table> и сопутствующие (< tr>,<th>,<td > и др.) предназначены для разметки табличной информации (т. е. такой, в которой имеется смысловая связь между элементами, принадлежащими одному столбцу или одной строке). W3C, как разработчик языка HTML, призывает использовать HTML для логической разметки информации, а оформление (в т. ч. позиционирование различных блоков) описывать отдельно от (X)HTML-разметки (с помощью CSS, например).

На момент 2011 года табличная верстка считается устаревшей.

CSS (Cascading Style Sheets — каскадные таблицы стилей) — формальный язык описания внешнего вида документа, написанного с использованием языка разметки.

Преимущественно используется как средство описания, оформления внешнего вида веб-страниц, написанных с помощью языков разметки HTML и XHTML.

CSS используется создателями веб-страниц для задания цветов, шрифтов, расположения отдельных блоков и других аспектов представления внешнего вида этих веб-страниц. Основной целью разработки CSS являлось разделение описания логической структуры веб-страницы (которое производится с помощью HTML или других языков разметки) от описания внешнего вида этой веб-страницы (которое теперь производится с помощью формального языка CSS). Такое разделение может увеличить доступность документа, предоставить большую гибкость и возможность управления его представлением, а также уменьшить сложность и повторяемость в структурном содержимом.

Правила CSS пишутся на формальном языке CSS и располагаются в таблицах стилей, то есть таблицы стилей содержат в себе правила CSS. Эти таблицы стилей могут располагаться как в самом веб-документе, внешний вид которого они описывают, так и в отдельных файлах, имеющих формат CSS. (По сути, формат CSS — это обычный текстовый файл. В файле.css не содержится ничего, кроме перечня правил CSS и комментариев к ним.)

Свойства элемента float

Определяет, по какой стороне будет выравниваться элемент, при этом остальные элементы будут обтекать его с других сторон. Когда значение свойства float равно none, элемент выводится на странице как обычно, при этом допускается, что одна строка обтекающего текста может быть на той же линии, что и сам элемент.

Краткая информация

Значение по умолчанию	none
Наследуется	Нет
Применяется	Ко всем элементам (за исключением абсолютно позиционированных)
Анимируется	Нет

Значения

Left - Выравнивает элемент по левому краю, а все остальные элементы, вроде текста, обтекают его по правой стороне.

Right - Выравнивает элемент по правому краю, а все остальные элементы обтекают его по левой стороне.

None - Обтекание элемента не задаётся.

Свойства элемента clear

Устанавливает, с какой стороны элемента запрещено его обтекание другими элементами. Если задано обтекание элемента с помощью свойства float, то clear отменяет его действие для указанных сторон.

Краткая информация

Значение по умолчанию	none
Наследуется	Нет
Применяется	К блочным элементам
Анимируется	Нет

Значения

None - Отменяет действие свойства clear, при этом обтекание элемента происходит, как задано с помощью свойства float или других настроек.

Both - Отменяет обтекание элемента одновременно с правого и левого края. Это значение рекомендуется устанавливать, когда требуется снять обтекание элемента, но неизвестно точно с какой стороны.

Left - Отменяет обтекание с левого края элемента. При этом все другие элементы на этой стороне будут опущены вниз, и располагаться под текущим элементом.

Right - Отменяет обтекание с правой стороны элемента.

Свойства элемента z-index

Любые позиционированные элементы на веб-странице могут накладываться друг на друга в определенном порядке, имитируя тем самым третье измерение, перпендикулярное экрану. Каждый элемент может находиться как ниже, так и выше других объектов веб-страницы, их размещением по z-оси и управляет z-index. Это свойство работает только для элементов, у которых значение position задано как absolute, fixed или relative.

Краткая информация

Значение по умолчанию	auto
Наследуется	Нет
Применяется	К позиционированным элементам
Анимируется	Да

Значения

В качестве значения используются целые числа (положительные, отрицательные и ноль). Чем больше значение, тем выше находится элемент по сравнению с теми элементами, у которых оно меньше. При равном значении z-index, на переднем плане находится тот элемент, который в коде HTML описан ниже. Кроме числовых значений применяется auto — порядок элементов в этом случае строится автоматически, исходя из их положения в коде HTML и принадлежности к родителю, поскольку дочерние элементы имеют тот же номер, что их родительский элемент.

Свойства элемента position

Устанавливает способ позиционирования элемента относительно окна браузера или других объектов на веб-странице.

Краткая информация

Значение по умолчанию	static
Наследуется	Нет
Применяется	Ко всем элементам
Анимируется	Нет

Значения

Absolute - Абсолютное позиционирование. Указывает, что элемент абсолютно позиционирован, при этом другие элементы отображаются на веб-странице словно абсолютно позиционированного элемента и нет. Положение элемента задаётся свойствами left, top, right и bottom, также на положение влияет значение свойства position родительского элемента. Так, если у родителя значение position установлено как static или родителя нет, то отсчёт координат ведётся от края окна браузера. Если у родителя значение position задано какrelative, то отсчёт координат ведётся от края родительского элемента.

Fixed - Фиксированное позиционирование. По своему действию это значение близко к absolute, но в отличие от него привязывается к указанной свойствами left,top, right и bottom точке на экране и не меняет своего положения при прокрутке веб-страницы.

Relative - Относительное позиционирование. Положение элемента устанавливается относительно его исходного места. Добавление свойств left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения.

Static - Статичное позиционирование. Элементы отображаются как обычно. Использование свойств left, top, right и bottom не приводит к каким-либо результатам.

Sticky - Это сочетание относительного и фиксированного позиционирования. Элемент рассматривается как позиционированный относительно, пока он не пересекает определённый порог, после чего рассматривается как фиксированный. Обычно применяется для фиксации заголовка на одном месте, пока содержимое, к которому относится заголовок, прокручивается на странице.

26. Рекламные баннеры: назначение, требования, предъявляемые к баннерам, стандартные размеры, особенности размещения на web-странице, критерий эффективности, средства повышения эффективности

Баннер (англ. banner — флаг, транспарант) — графическое изображение рекламного характера, аналогичное рекламному модулю в прессе. Может быть как статичным изображением или даже текстом, так и содержать анимированные элементы (вплоть до видео и интерактивных объектов). Как правило, содержит гиперссылку на сайт рекламодателя или страницу с дополнительной информацией.

Основные задачи баннера

· Задачи можно разделить на две группы:

· Задача продажи товара

1. Привлечь внимание. Это первоначальный необходимый результат работы баннера. Эта задача решается подбором содержимого. Приемлемый с точки зрения аудитории и потенциально одобряемый её членами вид содержимого безусловно должен вызывать положительную оценку у заказчика, если целью размещения является не размещение ради продажи факта размещения, а формирование положительного впечатления в массовом сознании аудитории.

2. Заинтересовать. Пробудить у клиента интерес к рекламируемому товару или услуге.

3. Подтолкнуть к переходу на сайт. Эта задача достигается с помощью элемента недосказанности в содержании баннера.

4. Побудить к действию, то есть к покупке товара или услуги на самом сайте (что является конечной целью рекламы). Эта задача налагается не на сайт, а прежде всего на информацию в баннере.

· Задача брендинга или имиджевая задача

1. Повысить узнаваемость бренда, логотипа компании, значка продукта

2. Составить положительное отношение к бренду, компании, продукту

3. и др.

 

Рекламодатели могут быть почти уверенными, что на любом Web-сайте у них примут баннер формата 468x60 пикселов. Но это пока и все. На сегодняшний день - это практически единственный действующий "стандарт". При этом по оценкам Coalition for Advertising Supported Information and Entertainment (CASIE) и Internet Advertising Bureau (IAB), весьма уважаемых общественных организаций американских издателей и рекламодателей, в настоящее время активно используется более 250 разновидностей баннеров. При этом IAB не ограничивается констатацией факта о 250 видах баннеров и предлагает всем придерживаться наиболее часто используемых размеров. Наиболее распространенными размерами баннеров исследователи IAB считают следующие:

Размер (пиксели)	Тип
468 x 60	Full Banner
392 x 72	Full banner with Vertical Navigation Bar
125 x 125	Square Banner
120 x 90	Button #1
120 x60	Button #2
120 x 240	Vertical Banner
88 x 31	Micro Button
234 x 60	Half Banner