Dreamweaver MX 2004 с нуля(4)
Автор：Eve Cole
Время обновления：2009-05-31 21:02:51
Использование слоев <BR> Слой — это область веб-страницы. На веб-странице может быть несколько слоев. Самое большое преимущество состоит в том, что каждый слой может перекрываться, и вы можете решить, будет ли каждый слой виден. в то же время, Возможность настройки иерархических отношений между слоями. Освоив технологию слоев, вы сможете предоставить мощные возможности управления веб-страницами.
Создать слой
Чтобы проиллюстрировать функцию слоя, мы сначала создадим простой пример эффекта, как показано на рисунке 1 (рис. 1).
Рисунок 1
Первым шагом является создание новой страницы в Dreamweaver MX 2004 и выполнение команды «Вставка→Объекты слоя→Слой». В это время в окне редактирования появится черная прямоугольная рамка, которая является вставленным слоем. Когда мышь перемещается по прямоугольной линии рамки, мышь принимает форму крестообразной стрелки. При щелчке мышью вокруг линии рамки появляются 8 черных сплошных квадратов, а в верхнем левом углу появляется пустой квадрат, обозначающий это. что этот слой выбран.
Совет: С помощью мыши перетащите закрашенный квадрат, чтобы изменить размер слоя, и перетащите пустой квадрат в левом верхнем углу, чтобы изменить положение слоя.
Второй шаг — щелкнуть мышью по слою и ввести «Новости компьютерного образования Китая», а затем установить синий цвет текста в окне панели свойств.
Третий шаг — щелкнуть границу слоя, чтобы выбрать слой, затем запустить команду «Редактировать → Копировать», чтобы скопировать текущий слой, затем щелкнуть мышью в других пустых областях окна редактирования и запустить команду «Редактировать → Вставить». команда, так что в окне редактирования появится еще один слой, но на данный момент они перекрываются, и вам нужно переместить слой, прежде чем вы сможете увидеть два слоя.
Четвертый шаг — изменить цвет текста одного из слоев на черный и переместить положение слоя так, чтобы положения двух слоев отличались на несколько пикселей, создавая тем самым эффект тени (рис. 2).
Рисунок 2
После завершения вышеуказанных операций нажмите кнопку «F12» для предварительного просмотра, и вы сможете увидеть эффект, показанный на рисунке 1, в браузере IE.
Вложенные слои
Так называемый вложенный уровень относится к слою, созданному в другом слое. Например, на рисунке 3 показан типичный вложенный уровень (рисунок 3). На самом деле создать такой вложенный слой очень просто. Просто создайте родительский слой, щелкните мышью внутри слоя и снова вставьте слой. Однако вложенные слои не означают, что подслой должен находиться внутри родительского слоя. Между ними существует отношение наследования.
Рисунок 3
Функция наследования состоит в том, чтобы поддерживать видимость подслоя в соответствии с видимостью родительского слоя. Поскольку многие специальные эффекты динамических веб-страниц достигаются путем управления видимостью слоя, при изменении видимости родительского слоя видимость Меняется и видимость подслоя. Более того, отношения наследования также могут сохранять относительное положение дочернего слоя и родительского слоя неизменным. Например, если мы перетащим родительский слой для перемещения, дочерний слой также будет перемещаться вместе с ним. Это будет очень полезно при создании динамического слоя. веб-страницы.
Z-порядок слоев
По сравнению с таблицами самым большим преимуществом слоев является то, что они могут перекрываться. Чтобы указать, какой слой находится сверху, а какой снизу, для каждого слоя необходимо установить серийный номер. Этот серийный номер представляет собой «Z-порядок». Это означает, что в дополнение к координатам X и Y экрана искусственно добавляется ось Z, перпендикулярная экрану.
Как показано на рисунке 4, четыре слоя в левой области явно отличаются от четырех слоев в правой области. Настроить порядок слоев также очень просто: просто щелкните мышью и поместите их внизу. Подойдет , средний и верхний слой. Однако этот метод работы кажется немного затруднительным, когда слоев много, и его неудобно настраивать позже, поэтому мы можем внести коррективы через панель слоев.
Рисунок 4
Сначала запустите команду «Окно → Слои», чтобы активировать панель слоев. В это время вы можете увидеть окно панели, показанное на рисунке 5 (рис. 5). Здесь просто выберите слой, серийный номер которого необходимо изменить, нажмите кнопку. мышь и перетащите ее вверх или вниз. Перетащите и отпустите мышь, когда между двумя слоями, которые вы хотите вставить, появится горизонтальная линия, чтобы вы могли изменить «Z-порядок» каждого слоя.
Рисунок 5
Совет: Нажмите непосредственно на значение поля «Z», чтобы изменить его на необходимый уровень слоя.
Создание таблиц с использованием слоев
Хотя использование слоев для поиска элементов веб-страницы гораздо удобнее, чем использование таблиц, только браузеры IE 4.0 и выше поддерживают функцию слоев. Поэтому, чтобы позволить друзьям, использующим старые браузеры, увидеть работу, над созданием которой вы так усердно работали. лучший способ — преобразовать слой в таблицу.
Первым шагом является установка флажка «Предотвращать перекрытия» в верхней части окна, показанного на рисунке 5, чтобы каждый слой не мог перекрывать друг друга, иначе в процессе конвертации появится предупреждающее сообщение.
Вторым шагом является запуск команды «Изменить → Преобразовать → Слои в таблицу». В это время вы можете увидеть окно, показанное на рисунке 6 (рис. 6). В области «Макет таблицы» выберите «Наиболее точный» и выберите «Наиболее точный». «Использовать прозрачные GIF-изображения» соответственно. Два варианта: первый создает ячейку для каждого слоя посредством точного преобразования, чтобы обеспечить расстояние между каждой ячейкой, второй заполняет последнюю строку преобразованной таблицы прозрачным изображением GIF, что гарантирует, что все Браузеры Все имеют одинаковый внешний вид.
Рисунок 6
Третий шаг – завершение операции преобразования слоя в таблицу после нажатия кнопки «ОК».
Совет: Dreamweaver MX 2004 также предоставляет функцию преобразования таблиц в слои; шаги аналогичны.
Если вы хотите сделать свои собственные веб-страницы красочными, вы должны освоить технологию слоев. В противном случае вы столкнетесь со многими трудностями при создании динамических веб-страниц в будущем. Поэтому рекомендуется подробно изучить приведенное выше введение, чтобы по-настоящему. освоить технологию слоев.
