Синтаксис

<div>...</div>

<div>...</div>

Атрибуты:

align

Задает выравнивание содержимого тега <div>.

title

Добавляет всплывающую подсказку к содержимому.

Закрывающий тег - Обязателен.

Габариты блока в стилях указываются в свойствах width и height , при этом, как и повсеместно в таких случаях нельзя указывать отрицательные значения. В некоторых случаях для дизайна страниц приходится прибегать к переменным габаритам блока. Для этого в CSS предусмотрены свойства min-width, min-height (минимальная ширина и высота блока) и max-widht/max-height (максимальные их значения).

Внешние отступы от блока диктуют параметры: margin (отступы одинаковые), margin-left (отступ только слева), margin-right (отступ справа), margin-top (отступ сверху) и margin-bottom (отступ снизу). Аналогично находит применение свойство padding (отступ внутри блока).

При задании фона блока div нужно применить свойство background-color, выбор значения которого не отличим от общего применения цветов. В случае, если Вы захотите использовать в качестве фона какое-либо изображение, то применяйте свойство background-image, при этом в значении укажите адрес и имя файла нужного изображения. Ограничить повторение изображения в фоне блока можно свойством background-repeat и его значениями: repeat-x (повторение по оси X), repeat-y (по оси Y) и no-repeat (без повторений). При необходимости зафиксировать фоновое изображение, для того, чтобы оно оставалось неподвижным при прокручивании используйте значение fixed в свойстве background-attachment.

Для изменения параметров рамки блока применяются свойства, начинающие со слова BORDER. Так при помощи border-width можно установить одинаковые значения для всех четырёх границ блока, а в значениях border-left-width, border-right-width, border-top-width и border-bottom-width описывается конкретная граница. По аналогичному представлению применяются: border-color (цвет линий рамки блока) и border-style (внешний вид линий). Про последнее свойство нужно добавить, что они имеют несколько, неизученных нами, значений:

1. solid, groove, ridge, double - линии рамки будут сплошными, вдавленными, выпуклыми и двойными соответственно.

2. inset - блок полностью вдавленный.

3. outset - объёмный вид блока.

4. none - нет линий.

45.Табличная верстка сайта: последовательность шагов, примеры.

Таблицы, которые первоначально проектировались как средство представления двумерных массивов данных, сейчас используются в основном как инструмент для точного позиционирования контента на веб-странице. Стандарт HTML не предусматривает возможности расположить картинки и текст относительно друг друга с приемлемой точностью, а табличная верстка, при которой различные части контента помещаются в разные ячейки таблиц, способна решить эту проблему. Кроме того, табличная верстка очень полезна при проектировании сайтов с большим количеством графических элементов: в больших рисунках почти всегда можно выделить области, закрашенные одним и тем же цветом, которые можно выбросить, заменив на пустые ячейки с соответствующим фоном и сэкономив таким образом на общем «весе» графики и времени загрузки страниц. Это, конечно же, не единственное преимущество упомянутого способа верстки.

 Табличной будем называть верстку, в результате которой все элементы на странице так или иначе находяться во внутренних элементах таблицы, таких, как например <tr> и <td>.

Табличная верстка страдает перенасыщенностью кода, трудно поддается редактированию и не является логичной, загружается только после загрузки внутреннего контента. Бестабличная же верстка недостаточно поддерживается со стороны производителей браузеров. Бестабличная верстка обладает логичностью кода, легко редактируется, загружается по мере загрузки блоков, чем экономит "терпение" посетителя. Но верстать блоками намного сложнее — это требует определенных знаний различий браузеров и технической подготовки — чем таблицами. Одно из важнных свойств бестабличной верстки — правильное отображение сайта на экранах мобильных устройств, объёмы продаж которых с каждым годом значительно увеличиваются.

Сами по себе таблицы не противоречат ни здравому смыслу, ни рекомендациям W3C, если они используются по назначению, т.е. для структурирования данных, организованных подобающим образом, а их оформление определяется при помощи CSS без применения визуальных атрибутов HTML.

Таблицы и блочная модель CSS — это не взаимоисключающие, а взаимодополняющие инструменты, каждый из которых служит своим определённым целям.

Приёмы табличной верстки

• При верстки с помощью таблиц желательно разбить код на несколько таблиц. Во-первых, потому что так проще писать разметку. Во-вторых, так браузер быстрее выведет на экран часть страницы, не дожидаясь пока страница загрузится полностью.

• Необходимо задавать размеры графическим объектам, даже если размеры совпадают с реальными, чтобы браузер мог "просчитать" страницу и зарезервировать место под каждое изображение. Такая страница в процессе загрузки не будет "прыгать" и "дёргаться".

• Необходимо указывать размеры ячеек таблицы, даже если они совпадают с размерами помещённых в них рисунков: для чёткой стыковки краёв изображений, помещённых внутрь ячеек.

• Необходимо удалить лишние пробелы и символы перевода строк из HTML-кода, если необходимо расположить изображение вплотную друг к другу.

• В процессе отладки кода нужно включать отображение границ таблицы, чтобы лучше в ней ориентироваться.

• Чтобы задать поля для ячеек таблицы, которая служит каркасом дизайна нужно поместить в ячейку вложенную таблицу и задать для неё поля и и отступы.

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