Лабораторная работа 9: Разметка страниц DIV и CSS, позиционирование

1. Лабораторная работа 9 - Разметка страниц с помощью блоков (DIV) и CSS.
Позиционирование.( 2 балла)
Лабораторная работа 9 - Разметка страниц с помощью блоков (DIV) и CSS.
Позиционирование.( 2 балла)
Требуемые условия завершения
Цель работы: формирование умений разметки страниц с помощью блоков (DIV) и
CSS.
Литература

Спецификация каскадных таблиц стилей CSS2 (RUS)

Основы CSS

CSS - Cascading Style Sheets
Поясняющая информация
Для чего это нужно?
Вспомним недостатки использования таблиц:

"Медленная загрузка". Пока вся таблица не загрузится, информация на
экране не появится.

Излишний код. Приходится создавать много ячеек и строк, которые, в
общем-то, не нужны.

Отсутствие возможности с точностью до пикселов расположить элемент на
экране.

Отсутствие возможности "надвинуть" один элемент на другой.

Отсутствие возможности управлять отображением элементов (при
переполнение, таблица просто увеличивается в размерах).
Эти проблемы можно решить с помощью CSS и <DIV>.
Как это делается
Тэг <DIV> - служит для группирования элементов в блок.
К сгруппированным элементам можно применить стили.
Посмотрим на примерах, как это делается:
Пример. Выделение блока цветом фона
<div style="background-color: #00FFFF">
Содержимое этого элемента DIV будет выделено таким цветом.
</div>
Пример. Позиционирование и задание размеров
<div style="background-color: #AAAAFF">
Содержимое этого элемента DIV будет позиционироваться здесь.
</div>
<div style="float: left; width: 200; height: 200; background-color: #00FFFF">
Содержимое этого элемента DIV будет позиционироваться здесь.
</div>
<div style="float: right; width: 200; height: 200; background-color: #FFFF00">
Содержимое этого элемента DIV будет позиционироваться здесь.
</div>
<div style="width: 200; height: 200; position: relative; left: 20; background-color:
#0FFD02">
Содержимое этого элемента DIV будет позиционироваться здесь.
</div>
<div style="background-color: #FCC403">
Содержимое этого элемента DIV будет позиционироваться здесь.
</div>
Пример. Позиционирование в 2,5 мерном измерении
Порядок наложения (перекрытия) блоков определяется атрибутом z-index.
Блок - 1
Блок - 2
Блок - 3
Блок - 4
Почти 3D
Код этого примера:
<div style="position: relative; width: 200; height: 200; z-index: 0; background-color:
#FFFF00">
Блок - 1
</div>
<div style="position: relative; width: 200; height: 200; left: 100; z-index: 1; top: -100;
background-color: #00FFFF">
Блок - 2
</div>
<div style="position: relative; left: 220; top: -400; width: 200; height: 200; z-index:
2; background-color: #00FF00">
Блок - 3
</div>
<div style="position: relative; width: 750; height: 20; z-index: 1; top: -580; backgroundcolor: #FE76AF">
Блок - 4
</div>
<div style="position: relative; top: -600; z-index: 3; left: 100">
Почти 3D
</div>
Примеры. Управление переполнением и видимостью.
При переполнении следующего блока:
<div style="width: 200; height: 200; background-color: #00FFFF">
</div>
блок будет увеличиваться (т.е. также как и таблица).
переполнениеееееееееееееееееееееееееееееееееееееее переполнение
переполнение переполнение переполнение переполнение переполнение
переполнение переполнение переполнение переполнение переполнение
переполнение переполнение переполнение переполнение переполнение
переполнение переполнение переполнение переполнение переполнение
переполнение переполнение переполнение переполнение переполнение
переполнение переполнение переполнение
При переполнении следующего блока:
<div style="overflow: auto; width: 200; height: 200; background-color: #00FFFF">
</div>
блок не будет увеличиваться, информацию можно просмотреть с помощью
прокрутки
переполнениеееееееееееееееееееееееееееееееееееееее переполнение
переполнение переполнение переполнение переполнение переполнение
переполнение переполнение переполнение переполнение переполнение
переполнение переполнение переполнение переполнение переполнение
переполнение переполнение переполнение переполнение переполнение
переполнение переполнение переполнение переполнение переполнение
переполнение переполнение переполнение
При переполнении следующего блока:
<div style="overflow: hidden; width: 200; height: 200; background-color: #00FFFF">
</div>
блок не будет увеличиваться, информация, не поместившаяся в блок, не будет
отображена
переполнениеееееееееееееееееееееееееееееееееееееее переполнение
переполнение переполнение переполнение переполнение переполнение
переполнение переполнение переполнение переполнение переполнение
переполнение переполнение переполнение переполнение переполнение
переполнение переполнение переполнение переполнение переполнение
переполнение переполнение переполнение переполнение переполнение
переполнение переполнение переполнение
Практические задания
Задание 1
1. Создайте новую страницу.
2. Сделайте ее визуальной копией первой страницы, но используйте не
таблицы, а блоки и стили. Во FrontPage можно использовать (хотя там не
все реализовано) меню "Format", подменю "Borders and Shading..." и
"Pozition...". Также пользуйтесь спецификацией каскадных таблиц стилей
CSS2 (RUS).
3. Стили для блоков вынесите в main.css.
4. Проверьте работоспособность на сервере.
5. В комментариях поясните свойства блоков.
Задание 2
1. Создайте новую страницу.
2. Сделайте коллаж из картинок или фотографий (не менее 5-ти) применив 2,5
мерное позиционирование.
3. Проверьте работоспособность на сервере.
4. В комментариях поясните свойства блоков.
Задание 3
1. Для страницы с метками (лабораторная работа 3) примените
свойство overflow:
- visible - для первого раздела
- auto - для второго раздела
- hidden - для третьего раздела
- scroll - для четвертого раздела
- auto - для пятого раздела
обязательно задайте размеры, цвет фона или бордюр блоков.
2. Проверьте работоспособность на сервере.
К сдаче лабораторной предоставляются: работающие страницы на
сервере.
Последнее изменение: среда, 13 июля 2011, 15:23