Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
ИСИС.docx
Скачиваний:
4
Добавлен:
17.04.2019
Размер:
210.92 Кб
Скачать

46.Блочная верстка сайта. Блочная модель web-страницы. Блочные элементы. Строчные элементы. Свойство display. Позиционирование элементов. Слои. Плавающие элементы. Врезки. Плавающие разделы.

Блок — это обычная прямоугольная область, обладающая рядом свойств, таких как: рамка, поля и отступы. Содержимым блока может быть что угодно — кусок текста, картинка, список, форма для заполнения, меню навигации и т.п. Блоки можно описывать, опираясь на следующие характеристики:

Рамка (border) — это контур, для которого можно задать такие характеристики как толщина, цвет и тип (пунктирная, сплошная, точечная).

Поля (padding) — отделяют содержимое блока от его рамки, чтобы текст, например, не был “впритык” к стенкам блока.

Отступы (margin) — это пустое пространство между различными блоками, позволяющее на заданном расстоянии расположить два блока относительно друг друга.

Блоки, как и таблицы — это элементы всегда располагающиеся на странице вертикально. То есть, если в коде страницы записаны подряд два блока, то отобразятся они в браузере один под другим. Если нам нужно расположить несколько блоков горизонтально, то в их свойствах задаётся такой параметр как “обтекание” (float).

В последнее время блочная верстка сайтов или, как ее еще называют, div верстка, стала очень популярной. Большинство современных сайтов строятся именно по этой технологии. Суть ее заключается в том, что базовый каркас (шаблон) страницы формируется из блоков, в качестве которых выступает html тег DIV . С помощью стилей эти блоки позиционируются на странице определенным образом, формируя каркас, который уже затем наполняют содержимым.

Сайдбар для сайта (sidebar в дословном переводе с английского языка обозначает «боковая панель») – это отделенная от других элементов панель, в которой наиболее часто располагается навигационное меню, список категорий, ссылки, различные рейтинги, контекстная и иная реклама, а также счетчики посещаемости. В сайдбарах отображаются виджеты. Каждый виджет предназначен для определенной задачи. В сайдбаре виджетов может быть неограниченное количество.

Копирайт — «copywriting» - написание уникальных текстов для веб- сайтов. Еще один вид копирайтинга — рекламные тексты.

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

Футеры (от англ. footer - нижняя часть) - это название нижних частей сайтов. В рунете их еще называют “подвалами сайтов”.

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

В html различают элементы блочные и строчные. Причем блочные элементы это как бы отдельная структурная единица, которая всегда отделяется абзацными отступами. Т.е. нельзя расположить два блочных элемента на одной строке. Примером блоков в html могут служить элементы H1-Н6, Р, DIV. А строчные элементы не создают как-бы отдельной структурной единицы, не отделяются абзацными отступами, и например два строчных элемента могут без проблем расположиться на одной строке. Примером могут быть элементы strong , I.

Блоки в HTML задаются с помощью тега DIV. Его атибуты :

id — атрибут, позволяющий придать тегу уникальное значение, то есть такое, которое на странице используется только один раз. Например “header” (про кавычки не забываем), или “footer“. Таким образом мы сможем задать затем в листе стилей для тэга div с атрибутом id и значением “header” (шапка) одни настройки, а для подвала “footer” совсем другие, и браузер верно распознает, что вот этот абзац, обозначенный тэгом р относится к “шапке” и будет набран крупным и красным шрифтом, а вот этот к “подвалу” и будет мелким и серым. И никакой путаницы!

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

Абсолютное позиционирование (POSITION:ABSOLUTE;)

Обычно для позиционирования применяют именно этот тип. В технологии CSS, свойство позиционирования обозначается как POSITION, а чтобы указать, что это позиционирование абсолютное, пишут значение ABSOLUTE. Затем используя ключевые слова top, right, bottom, left указывают необходимые координаты, которые отсчитываются от краев окна браузера

Относительное позиционирование (POSITION:RELATIVE; )

При относительном позиционировании, бокс смещается , но его прежнее место ничего не заполняет. Обозначается в как POSITION: RELATIVE;

Координаты в отличие от абсолютного позиционирования, отсчитываются от прежнего положения блока.

Плавающие блоки(свойство float)

С помощью плавающих блоков можно создавать различные эффекты и даже дизайн страниц, т.н. блочный дизайн. Итак, Плавающие блоки в CSS определяются свойством float.

Свойства FLOAT

Данное свойство определяет, будет ли блок плавающим и в какую сторону он будет перемещаться. Свойство может принимать следующие значения.

left - структурный блок перемещается влево. Остальное содержимое документа будет выводиться вдоль правой стороны блока, начиная с самого верха.

right - структурный блок перемещается вправо. Остальное содержимое документа выводится вдоль левой стороны блока, начиная с самого верха.

none - блок не перемещается (значение по умолчанию).

Говоря о плавающих блоках, необходимо упомянуть также о свойстве CLEAR - специфическое свойство, позволяющее определенным образом позиционировать плавающие блоки.

left - блок должен размещаться ниже всех левосторонних плавающих блоков.

right - блок должен размещаться ниже всех правосторонних плавающих блоков.

both - блок должен размещаться ниже всех плавающих блоков.

none - никаких ограничений на положение блока относительно перемещаемых объектов не накладывается