Контейнерный Web-дизайн
ЛЕКЦИЯ №10
Блочные контейнеры
|
|
|
|
<DIV> |
|
|
|
|
|
<TABLE> |
|
|
|
|
|
<CAPTION>Это |
|
<DIV> |
|
|
|||
|
|
таблица</CAPTION> |
|||
<H3>Это |
|
|
|||
|
|
<TR> |
|||
заголовок</H3> |
|
|
|||
|
|
<TH>Это первый |
|||
<P>Это первый |
|
|
|||
|
|
столбец</TH> |
|||
абзац.<P> |
|
|
|||
|
|
<TH>Это второй |
|||
<P>Это второй |
|
|
|||
|
|
столбец</TH> |
|||
абзац.<P> |
|
|
|||
|
|
</TR> |
|||
</DIV> |
|
|
|||
|
|
. . . |
|
||
|
|
|
|
</TABLE> |
|
|
<DIV STYLE="text-align: |
|
</DIV> |
|
|
|
center"> |
|
|||
|
<VIDEO SRC="film.ogg" |
|
|
|
|
|
CONTROLS> |
|
|
||
|
</VIDEO> |
|
|
||
|
<P>Щелкните кнопку |
|
|
||
|
воспроизведения, чтобы |
|
|
||
|
просмотреть фильм.</P> |
|
|
||
|
</DIV> |
|
|
||
|
|
|
|
|
|
Старые разновидности Web-дизайна и
их недостатки
• Текстовый Web-
дизайн
• Фреймовый Web-
дизайн
Достоинства табличного Web-дизайна:
•Табличный Web-
Таблицы — стандартная часть языка HTML, а значит, можно
добиться того,
дизайн
чтобы основанные на них Web-страницы отображались одинаково во всех Web-
обозревателях.
Таблицы HTML можно делать сколь угодно сложными, объединяя их ячейки и вкладывая одни таблицы в другие. Это позволяет делать очень сложные Web-
страницы, вмещающие разнородные фрагменты содержимого, имеющие не- сколько колонок текста и больше похожие на газеты.
щность контейнерного Web-дизайна
Непритязательный вид и линейное представление Web-страниц — у текстового
Web-дизайна. Мы можем расположить контейнеры на Web-странице практиче- ски как угодно и поместить в них произвольное содержимое: текст, таблицы,
изображения, аудио- и видеоролики и даже другие контейнеры. А CSS позволит
задать для них практически любое представление.
"Монолитность" Web-страниц — у текстового и табличного Web- дизайна. Со-
временные Web-обозреватели позволяют с помощью специально созданного по-
ведения загрузить в контейнер Web-страницу, сохраненную в отдельном файле, т. е. организовать подгружаемое содержимое.
"Нестандартность" фреймов — у фреймового Web-дизайна. Контейнеры и соот-
ветствующие теги официально стандартизированы комитетом W3C и обрабаты-
ваются всеми Web-обозревателями одинаково.
редставление для Web-сайта
cheader — стиль для контейнера с заголовком Web-сайта;
cnav — стиль для контейнера с полосой навигации;
cmain — стиль для контейнера с основным содержимым;
ccopyright — стиль для контейнера со сведениями об авторских правах.
float
Определяет, по какой стороне будет выравниваться элемент, при этом остальные элементы будут обтекать его с других сторон. Когда значение
свойства float равно none, элемент выводится на странице как обычно, при этом допускается, что одна строка обтекающего текста может быть на той же линии, что и сам элемент.
float: left | right | none | inherit
overflo w
Свойство overflow управляет отображением содержания блочного элемента, если оно целиком не помещается и выходит за область заданных размеров.
2) Параметры размещения. Плавающие контейнеры
float: left|right|none|inherit 
left — элемент Web-страницы выравнивается по левому краю родительского элемента, а остальное содержимое обтекает его справа;
right — элемент Web-страницы выравнивается по правому краю родительского элемента, а остальное содержимое обтекает его слева;
none — обычное поведение элемента Web-страницы, когда он следует за своимclear: left|right|both|none|inherit
предшественником и располагается ниже его.
left — элемент Web-страницы должен располагаться ниже всех элементов, для
которых у атрибута стиля float задано значение left;
right — элемент Web-страницы должен располагаться ниже всех элементов, для
которых у атрибута стиля float задано значение right;
both — элемент Web-страницы должен располагаться ниже всех элементов, для
которых у атрибута стиля float задано значение left или right;none — обычное поведение. Если контейнеру, для которого