• Всего: 29

• За месяц:
• За неделю:
• Вчера:
• Сегодня:

Цель работы: формирование умений разметки страниц с помощью блоков (DIV) и CSS.

Литература

• Спецификация каскадных таблиц стилей CSS2 (RUS)
• Основы CSS
• CSS - Cascading Style Sheets

Поясняющая информация

Для чего это нужно?

Вспомним недостатки использования таблиц:

• "Медленная загрузка". Пока вся таблица не загрузится, информация на экране не появится.

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

• Отсутствие возможности с точностью до пикселов расположить элемент на экране.

• Отсутствие возможности "надвинуть" один элемент на другой.

• Отсутствие возможности управлять отображением элементов (при переполнение, таблица просто увеличивается в размерах).

Эти проблемы можно решить с помощью CSS и <DIV>.

Как это делается

Тэг <DIV> - служит для группирования элементов в блок.

К сгруппированным элементам можно применить стили.

Посмотрим на примерах, как это делается:

Примеры. Выделение блока бордюром

Пример. Выделение блока цветом фона

Пример. Позиционирование и задание размеров

Пример. Позиционирование в 2,5 мерном измерении

Порядок наложения (перекрытия) блоков определяется атрибутом z-index.

Код этого примера:

<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; background-color: #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. Проверьте работоспособность на сервере.

К сдаче лабораторной предоставляются: работающие страницы на сервере.