ГЛАВА 10. Контейнерный Web-дизайн

ГЛАВА 10. Контейнерный Web-дизайн

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

Теперь мы займемся Web-дизайном. Согласитесь — наши Web-странички, несмотря на созданное нами шикарное представление, выглядят все еще крайне непрезентабельно. Настала пора оформить их как положено.

А для этого нам придется изучить новые элементы Web-страниц — блочные контейнеры. Правда, они не такие уж новые — с их встроенными "коллегами" мы по- знакомились еще в главе 8. Но именно блочные контейнеры дадут нам в руки инструмент современного Web-дизайна.

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

А напоследок мы получим от CSS очередной сюрприз — средства управления переполнением. Они пригодятся нам в случаях, если содержимое контейнера не помещается в нем, и не только…

Блочные контейнеры

Как ясно из названия, блочный контейнер может хранить только блочные элементы: абзацы, заголовки, большие цитаты, теги адреса, текст фиксированного форматирования, таблицы, аудио- и видеоролики. Блочный контейнер может содержать как один блочный элемент, так и несколько.

Блочный контейнер формируется с помощью парного тега <DIV>, внутри которого помещают HTML-код, формирующий содержимое контейнера (листинги 10.1—10.3).

В листинге 10.1 мы поместили в блочный контейнер заголовок и два абзаца.

Листинг 10.1

<DIV>

<H3>Это заголовок</H3>

<P>Это первый абзац.<P>

<P>Это второй абзац.<P>

</DIV>

Листинг 10.2 иллюстрирует блочный контейнер, содержащий таблицу.

Листинг 10.2

<DIV>

<TABLE>

<CAPTION>Это таблица</CAPTION>

<TR>

<TH>Это первый столбец</TH>

<TH>Это второй столбец</TH>

</TR>

.

</TABLE>

</DIV>

А блочный контейнер, приведенный в листинге 10.3, может похвастаться самым "богатым" содержимым.

Листинг 10.3

<DIV STYLE="text-align: center">

<VIDEO SRC="film.ogg" CONTROLS>

</VIDEO>

<P>Щелкните кнопку воспроизведения, чтобы просмотреть фильм.</P>

</DIV>

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

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

Данный текст является ознакомительным фрагментом.