Контрольные вопросы.

1. Что такое таблицы стилей?

2. Каких видов бывают таблицы стилей?

3. Как изменить внутреннюю таблицу стилей?

4. Как создать внутреннюю таблицу стилей?

5. Как создать внешнюю таблицу стилей?

6. В чем отличие внутренней и внешней таблиц стилей?

7. Как переопределить стиль класса?

8. Как выполнить установку параметров выравнивания элемента страницы?

9. В какой категории устанавливаются параметры абзаца?

10. Как выполнить настойку параметров пропуска листов при печати страницы?

Лабораторная работа № 13. Свободно позиционируемые элементы.

Цель работы: получить практические навыки создания и работы со свободно позиционируемыми элементами в Dreamweaver MX 2004.

Краткие теоретические сведения.

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

• координатами его верхнего левого угла;

• геометрическими размерами;

• слоем (уровнем), или z-индексом;

• видимостью или невидимостью;

• поведением в случае, если содержимое этого элемента выйдет за его размеры и др.

z-индекс – это порядковый номер свободного элемента, созданного на странице, при этом, элементы с большими номерами перекрывают элементы с меньшими номерами.

Включить измерительные линейки можно, выполнив команду ViewRulesShow, либо нажав комбинацию клавиш <Ctrl>+<Alt>+<R>.

Включить координатную линейку можно, выполнив команду ViewGridShow Grid.

Создать свободно позиционируемый элемент можно, выполнив:

1. Нажать кнопку Draw Layer , расположенную на вкладке Layout инструментария объектов.

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

Для создания свободного элемента можно также выполнить команду InsertLayout ObjectsLayer.

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

Для отображения значка свободного элемента нужно:

1. выполнить команду EditPreferences;

2. в появившемся окне Preferences переключиться на категорию Invisible Elements и включить флажок Anchor Points for Layers.

Для выделения свободного элемента нужно щелкнуть по значку свободного элемента.

Для удаления свободного элемента нужно выделить его границу и нажать клавишу Del.

Изменить z-индекс свободного элемента можно следующим образом:

1. Выделить свободный элемент.

2. Выполнить команду ModifyArrange и выбрать Bring To Front для увеличения z-индекса, и Send To Back для уменьшения z-индекса.

Параметры свободного элемента задаются в редакторе свойств:

где

Layer ID – уникальное имя свободного элемента, L и T – горизонтальная и вертикальная координаты верхнего левого угла, W и H – ширина и высота свободного элемента, z-Index – z-индекс – порядковый номер свободного элемента, Vis – список задает видимость свободного элемента на экране:

inherit- видимость наследуется от родителя,

visible- элемент видим,

hidden-элемент невидим,

default- как правило, аналогично inherit;

Bg Image- имя графического изображения, которое будет использовано в качестве фона, Bg Color- задает цвет фона свободного элемента,

Overflow – задает поведение свободного элемента, если его содержимое в нем не помещается:

visible- свободный элемент будет растянут по вертикали, чтобы вместить в себя все содержимое,

hidden- будет скрыта та часть содержимого, которая превышает его размеры,

scroll- будут отображены полосы прокрутки,

auto- полосы прокрутки будут отображены, если содержимое не помещается в элементе,

Clip – задает координаты видимой области свободного элемента (L и T-горизонтальная и вертикальная координаты верхнего левого угла, R и B- горизонтальная и вертикальная координаты нижнего правого угла).

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

Управление свободными элементами осуществляется с помощью панели Layers, которая вызывается на экран командой WindowLayers или клавишей <F2>.

Основную часть панели занимает таблица из трех колонок: изображение глаза (видимость), Name (имя свободного элемента) и Z (z-индекс).

Включенный флажок Prevent overlaps не позволяет разместить один свободный элемент на другой.

Изменение видимости свободного элемента с помощью панели Layers осуществляется последовательным щелканьем по строке с нужным элементом в колонке со значком глаза. При этом содержимое колонки будет меняться:

• изображение закрытого глаза – элемент невидим;

• изображение открытого глаза – элемент видим;

• пустая колонка – элемент “наследует” видимость у родителя.

Создание вложенных свободных элементов с помощью панели Layers выполняется следующим образом:

1. Выбрать в списке свободный элемент, который нужно “вложить” в другой.

2. Удерживая нажатой клавишу <Ctrl> перетащить выбранный элемент на элемент, в который требуется вложить первый, при этом элемент, на который “тащится” выбранный, будет выделен тонкой синей рамкой.

3. Отпустить перетаскиваемый элемент.

В результате будет создано “дерево” элементов.

Чтобы “вынести” вложенный элемент из родителя, нужно перетащить его в нужную позицию в списке.

Задания.

1. Создать Web-сайт, подобный тому, что представлен на Рис. 13-1.

2. Структура сайта должна включать не менее 3-х страниц.

3. Заглавная страница должна быть оформлена с использованием свободно позиционируемых элементов.

4. Все необходимые рисунки подготовить самостоятельно в любом графическом редакторе.

5. Цветовое и стилевое оформление всех страниц сайта выполнить самостоятельно, руководствуясь общепринятыми правилами.

6. Просмотреть созданный сайт в Web-обозревателе и проверить работу всех гиперссылок.