Попытаемся, используя слои, разместить слой с текстом над слоем с графическим изображением (т.е. одним слоем перекрыть другой).

47. Выберите Вставка → Слой. Появится прямоугольная область слоя, в которой установлен курсор. В этот слой необходимо вставить текст (скопируйте фрагмент текста из текстового файла «Устройства ввода» и вставьте в объект слоя).

48. Создайте еще один слой для графического изображения (Вставка → Слой). В появившемся объекте слоя установите курсор, щелкнув в нем курсором мыши (по умолчанию курсор ужу там установлен). Далее, выберите Вставка → Рисунок → Из файла и выберите из папки «картинки для Web-узла» изображение Komp.jpg.

ЗАМЕЧАНИЕ: для вставки изображения в слой не обязательно создавать сначала слой, затем вставлять картинку. Если изображение уже имеется, то его можно скопировать в слой или просто перетащить курсором мыши.

49. В результате такого размещения слоев, получается, что слой с картинкой размещен над слоем с текстом. Это расположение всегда можно при необходимости поменять в меню настройки расположения слоев. Для его отображения необходимо выбрать команду «Свойства слоя» в контекстном меню любого выделенного слоя. В итоге откроется это меню (см. рис. 22).

50. Для смены уровня расположения нужно поменять значение глубины слоя. Например, если слой с графическим изображением нужно расположить ниже, то его значение глубины слоя нужно сделать ниже значения глубины слоя с текстом. Сменить значение можно, щелкнув там двойным щелчком мыши и вписав нужное значение или выбрать команду «Изменить положение по оси Z» контекстного меню выделенного слоя.

51. Таким образом, можно менять уровень расположения слоев.

52. К слоям можно применить определенные события: например по нажатию на один слой с картинкой второй слой с текстом меняет формат текста, или например по нажатию на один слой открывается какой-либо файл, HTML-страница и т.д.

53. Настройка поведения слоя с графическим объектом. Например, попытаемся реализовать следующее: в результате нажатия на слой с картинкой во втором слое с текстом меняется формат текста. Для этого воспользуемся дополнительным меню для работы со слоями.

54. В контекстном меню слоя с картинкой выберите опцию «Свойства слоя». Затем в открывшемся меню должны отобразиться все созданные слои, при чем тот слой, который на странице является выделенным, в меню выделен синим цветом (не снимайте выделения, т.к. этим выделением мы указали слой, с которым осуществляются действия).

55. В нижней части меню щелкните «Поведение».

56. Затем следует щелкнуть по кнопке Вставить → выбрать Изменение свойства.

57. В открывшемся окне необходимо указать параметры, применяемые к текстовому слою (см. рис. 22). Для применения параметров можно воспользоваться кнопками ШРИФТ, ГРАНИЦА. Допустим, укажите в окне ШРИФТ следующие параметры: начертание или стиль написания — полужирный курсив; межзнаковый интервал — разреженный; шрифт — Arial. В окне ГРАНИЦЫ И ЗАЛИВКИ: стиль границы — пунктир; цвет — синий.

58. В итоге, в общем окне изменения свойств должны отобразиться все примененные параметры, и выбирается слой, к которому эти параметры применяются (см. рис. 22).

Рисунок 22. Окно выбора тем

59. После указания следует подтвердить выбор нажатием кнопки ОК. В результате, в меню настройки поведения слоев, указывается событие для слоя с графическим изображением (см. рис. 23). Аналогично можно добавлять и другие события. Например, это событие изменения свойств слоя с текстом будет производиться в результате нажатия кнопкой мыши по слою с картинкой.

Рисунок 23. Событие для слоя с изображением

60. Теперь попытаемся добавить второе событие для этого же слоя с картинкой. Но уже событие, которое будет срабатывать после двойного щелчка мыши по данному слою. В результате двойного щелчка необходимо открыть текстовый файл «Устройства ввода» из папки «картинки для Web-узла».

61. Для этого в этом же меню: Вставить → Переход по URL

62. В открывшемся окне следует указать путь к текстовому файлу (см. рис. 24).

63. В итоге, к слою с графическим изображение применены два события (см. рис. 25). Аналогичным образом можно применять и другие события по слою.

Рисунок 24. Указание адреса ссылки

Рисунок 25. События по слою с изображением

64. Для выхода назад, в общий список слоев следует щелкнуть по ссылке в нижней части окна «Слои».

65. Сохраните созданную страницу под названием «Устр_Ввода.html». Музыкальный фал можно сохранить или в общей папке, или в самостоятельно созданной специальной папке. Графические изображения желательно сохранять в папке Images. После применения событий к слоям страницы просмотрите созданную страницу и проверьте, работают ли примененные события в браузере (см. рис. 26): Файл → Просмотреть в обозревателе → выбирается обозреватель.

ЗАМЕЧАНИЕ: Файл с расширением МРЗ. Файл с таким расширением (*.mpЗ) и в таком формате современные браузеры не способны воспроизводить как фоновый звук. Решение проблемы несложно: нужно преобразовать обычный МРЗ в закодированный MPEG 1 Layer 3 файл WAV с RIFF-заголовком. Такой файл абсолютно совпадает с исходным МРЗ, за исключением нескольких начальных десятков байт, и занимает практически столько же места - но, при наличии в системе кодека МРЗ, спокойно воспроизводится браузером, который считает его обычным WAV. Добавить RIFF-заголовок позволяет большинство программ для генерации МРЗ.

Поэтому будем считать, что Файл с нашей музыкой имеет расширение wav или mid.

Рисунок 26. Страница Устр_Ввода.html

66. В завершение работы со слоями, добавим еще один слой на эту страницу. Вставка → Слой.

67. Затем в этот слой добавьте коллекцию картинок: Вставка → Рисунок → Создать фотоколлекцию...

68. В появившемся окне необходимо настроить свойства коллекции картинок. Для начала их нужно добавить: Добавить → Рисунки из файлов... → выберите все графические изображения (удерживая клавишу Shift или Ctrl) из папки «коллекция картинок», находящейся в папке «картинки для Web-узла».

69. Выделите из созданного списка картинок изображение l.jpg.

70. Выберите переключатель - использовать другие-параметры шрифта.

71. Выберите нужный шрифт, размер, цвет, стиль написания текста

72. Впишите подпись данного изображения.

73. Затем в списке выделите следующее изображение и выбрав нужные параметры форматирования текста, впишите вторую надпись и т.д.

74. Аналогично следует описать каждую картинку.

75. Затем, после описания каждой картинки, активизируйте вкладку МАКЕТ.

76. На вкладке МАКЕТ выберите ПОКАЗ СЛАЙДОВ.

77. ОК.

78. Разместите в нужном месте данный слой с коллекцией изображений, при необходимости отредактируйте размеры.

79. Сохраните дополненную страницу, и укажите место сохранения картинок для коллекции (их можно сохранить в папку Коллекция, которую следует создать в папке Images) и можно просматривать готовую страницу в браузере: Файл → Просмотреть в обозревателе → выбирается обозреватель.

Рисунок 27. Итоговая страница Устр_Ввода.html

80. Шаг 6: Теперь вернемся к Главной странице (см. рис. 20). Попытаемся настроить гиперссылку. Т.е. по нажатию на кнопку УСТРОЙСТВА ВВОДА нужно, чтобы в правой части окна открывалась страница Устр_Ввода.html

81. Для применения гиперссылки к кнопке следует проделать ряд действий: в контекстном меню кнопки УСТРОЙСТВА ВВОДА выберите ГИПЕРССЫЛКА.

82. В открывшемся окне выберите файл Устр_Ввода.html

83. Затем, для того, чтобы выбрать место, в котором будет открываться страница, нужно щелкнуть по кнопке (находящейся в правой части окна) ВЫБОР РАМКИ.

84. В результате откроется еще одно окно, в котором следует щелчком мыши указать ту часть (она указана красным пунктиром на рисунке 28), страницы, в которой требуется открывать нужную страницу.

Рисунок 28. Добавление гиперссылки

Дата добавления: 2015-07-10