Создание сайта при помощи Front Page 2000. Урок четвертый. Элементы мультимедиа

Анастасия Кулакова, alex_kulakoff@pisem.net

В общем, вы уже этим занимались на первом уроке. Сегодня разберём эту тему более подробно.

Существуют два основных типа графических изображений: фотографии и рисунки. Файлы, содержащие фотографические изображения, могут быть разных форматов, но для браузеров чаще всего используют либо GIF(Graphics Interchange Format - формат обмена графическими данными), либо JPEG(Joint Photographic Experts Group - формат объединённой экспертной группы по фотографии). В форматах GIF и JPEG используется алгоритм сжатия изображений, что даёт возможность хранить изображения в файле меньшего размера, чем в случае других форматов. Файлы изображений в этих форматах будут загружаться быстрее.

Рисунки могут быть также различных форматов: GIF, JPEG, BMP, PNG, однако и для хранения рисунков наиболее употребительными являются форматы GIF и JPEG. FrontPage поставляется вместе с библиотекой рисунков Clip Art Gallery, содержащей множество готовых изображений: кнопок, фигурок, фоновых изображений и т. д. Clip Art Gallery также включает в себя звуковые фрагменты и файлы видеоклипов.

Размещение фотографий и рисунков на странице осуществляется практически одинаковым образом. Очень полезная особенность FrontPage - возможность создания эскизов (thumb-nails) изображений, представляющих собой уменьшенные версии изображений и очень быстро загружающихся. Для того чтобы создать эскиз изображения, следует сначала поместить изображение на страницу, затем выделить его и щёлкнуть по кнопке Auto Thumbnail (Авто эскиз), расположенной на панели инструментов Image (Изображение). Тогда программа заменит изображение на странице его эскизом, щёлкнув на котором, посетитель сайта может загрузить полную версию изображения.

Помещение фотографии на странице.

1. В списке папок дважды щёлкните на файле serv01.htm. FrontPage отобразит страницу "Деканат" в режиме просмотра Page (Страница).
2. Поместите курсор в нашу пустую ячейку.
3. В меню Insert (Вставка) выберите Picture (Рисунок) и щёлкните на пункте From File (Из файла). Откроется диалоговое окно Picture (Добавить рисунок). В папке Images хранится вся графика сайта. Можете скопировать этот файл в папку Images и он станет Вам доступен.
4. Из списка файлов выберите свой файл. Изображение появится в окне предварительного просмотра.
5. Щёлкните на кнопке ОК. FrontPage поместит изображение на выбранное место.
6. На панели инструментов щёлкните на кнопке Save (Сохранить). Все изменения будут сохранены.

Изучите Clip Art Gallery.

1. В списке папок дважды щёлкните на файле serv02.htm. FrontPage отобразит страницу.
2. В меню Insert (Вставка) выберите Picture (Рисунок) и щёлкните на пункте Clip Art (Объект Clip Art).
3. Откроется окно Clip Art Gallery (Галерея Clip Art). На вкладке Picture (Рисунок) вы можете выбрать один из представленных там рисунков, чтобы поместить его на вашу страницу.
4. Щёлкните на ярлычке вкладки Sound (Звуки). На этой вкладке вы можете выбрать звуковой фрагмент для вашей страницы.
5. Щёлкните на ярлычке вкладки Motion Clips (Видеоклипы). На этой вкладке вы можете выбрать видеоклип или анимационный GIF-файл.
6. В окне Categories (Категории) выберите значок Academic (Академическая). FrontPage отобразит имеющиеся клипы этой категории.

   Если данная категория пуста, то вы можете загрузить клипы из Microsoft Clip Gallery Live. Анимационный GIF-файл представляет собой короткую последовательность изображений. Эти изображения быстро воспроизводятся одно за другим, что создаёт эффект анимации.

7. На панели инструментов Clip Art щёлкните на кнопке Back (Назад). FrontPage воспроизведёт значки клипов на вкладке Motion Clips (Видеоклипы) окна Clip Art Gallery (Галерея Clip Art).

   Кнопки Back (Назад) и Forward (Вперёд) работают точно так же, как и в Microsoft Internet Explorer.

8. Щёлкните на кнопке Close (закрыть), расположенной в правом верхнем углу окна Clip Art Gallery (Галерея Clip Art). Окно Clip Art Gallery (Галерея Clip Art) закроется.

   Чтобы загрузить дополнительные рисунки, звуковые фрагменты или видеоклипы через Web, установите соединение с Internet и щёлкните на кнопке Clips Online (Клипе Online), расположенной на панели инструментов в окне Clip Art Gallery (Галерея Clip Art). FrontPage соединится с сайтом Microsoft Clip Art Gallery Live, с которого вы сможете скачать дополнительные объекты галереи Clip Art для вашей Web-страницы.

Поиск в галерее Clip Art.

1. На странице serv02.htm щёлкните на пустой строке. Текстовой курсор теперь находится под заголовком страницы.
2. В меню Insert (Вставка) выберите команду Picture (Рисунок) и щёлкните на пункте Clip Art (Объект Clip Art). Откроется окно Clip Art Gallery (Галерея Clip Art).
3. Щёлкните в текстовом поле Search For Clips (Найти клипы), наберите arrow ("стрелка") и нажмите на клавишу [Enter]. FrontPage осуществит поиск в галерее Clip Art изображений стрелки и отобразит результаты на вкладке Pictures (Рисунки). 

   Вставка объекта Clip Art на страницу

   1. Щёлкните на рисунке, изображающем глобус со стрелкой, или на любом понравившемся вам изображении. Откроется всплывающее меню для изображения Clip Art. 
   2. В меню выберите команду Insert Clip (Вставьте объект Clip Art). FrontPage вставит изображение "копающего человечка" в выбранное вами место Web-страницы и закроет окно Clip Art Gallery. 

   Вы можете сделать практически любое изображение (включая объект Clip Art), находящееся на Web-странице, гиперссылкой. Для этого щёлкните правой кнопкой мыши на изображении, а затем выберите команду Hyperlink (Гиперссылка) в открывшемся меню. В открывшемся диалоговом окне Create Hyperlink (Создание гиперссылки) найдите файл, к которому вы хотите сделать ссылку, щёлкните на этом файле, после чего щёлкните на кнопке ОК. 

4. На панели инструментов щёлкните на кнопке Save (Сохранить), а затем на кнопке ОК в диалоговом окне Save Embedded Files (Сохранить внедрённые файлы). Страница будут сохранена.

Редактирование изображений на страницах

Поместить изображение на страницу легко, но часто оказывается, что изображение имеет больший или, наоборот, меньший размер, чем это нужно для страницы. Кроме того, многие посетители настраивают свои браузеры так, чтобы страницы грузились без графических изображений - при этом страница грузится гораздо быстрее, оставляя пустыми места, где должны быть эти изображения. FrontPage позволяет определить вам альтернативный текст (alternative text), который будет отображаться в тех случаях, когда изображения не будут загружаться. Вместо него посетители сайта увидят текстовое описание в том месте, где должно было находиться изображение. 

Изменение размеров изображений

1. Откройте наш файл serv02.htm. FrontPage отобразит страницу в режиме Page (Страница). 
2. Щёлкните по находящемуся на странице изображению и найдите правый нижний угол изображения. Там вы увидите маленький прямоугольник (Маркер изменения размера). 
3. Поместите указатель мыши над этим маркером. Указатель мышки примет вид диагональной двунаправленной стрелки.
4. Перетащите указатель мыши вправо и вниз, чтобы увеличить изображение. Размеры изображения увеличатся с сохранением пропорций.

Добавление альтернативного текста для изображения на странице

1. Щёлкните правой кнопкой мышки по этому изображению и в открывшемся контекстном меню нажмите на пункт Picture Properties (Свойства изображения). Откроется диалоговое окно Picture Properties (Свойства изображения).
2. . Щёлкните в текстовом поле Text (Текст) в разделе Alternative Representations (Альтернативные представления), наберите "Страница находится в разработке" и нажмите кнопку ОК. FrontPage вставит текст, который теперь будет присутствовать на странице, если браузер посетителя сайта не отображает графических изображений. 
3. Сохраните результаты. 

Добавление звуковых фрагментов к странице

Большая часть страниц несёт в себе какую-либо информацию, однако информация - не единственное, ради чего стоит создавать страницы. Нужно сделать так, чтобы наш сайт было приятно просматривать. Один из способов -- добавить на домашнюю страницу фоновое звуковое оформление. Фоновый звук будет воспроизводиться всё время, пока страница будет открыта в браузере. 

Когда вы будете выполнять шаги по добавлению звукового файла на страницу, звук будет воспроизводиться, только если страница загружена в Microsoft Internet Explorer. 

Если в качестве браузера вы используете Netscape Navigator, вы не услышите звук, поскольку этот браузер использует другие команды HTML для воспроизведения звука. 

Добавление фонового звука

1. В списке папок дважды щёлкните на файле index.htm. FrontPage отобразит страницу в режиме просмотра Page (Страница). 
2. Щёлкните правой кнопкой мыши на странице и в открывшемся контекстном меню выберите команду Page Properties (Свойства страницы). Откроется диалоговое окно Page Properties (Свойства страницы). 
3. Щёлкните по кнопке Browser (Просмотр). Откроется диалоговое окно Background Sound (Фоновый звук). 
4. Выберите любой музыкальный файл и щёлкните два раза по кнопке ОК. FrontPage поместит данный файл на страницу в качестве фонового звука, который будет воспроизводится всё время, пока данная страница будет загружена в браузере. 
5. Сохраните результаты работы, после чего просмотрите вашу работу в браузере. 

   По умолчанию фоновый звук будет воспроизводиться всё время, пока страница будет отображаться в окне браузера посетителя сайта. Вы можете сделать так, чтобы звуковой сигнал повторялся несколько раз, а затем его воспроизведение прекращалось. Для этого уберите флажок из поля Forever (Всегда) и в текстовом поле Loop (Цикл) определите количество повторов. После этого щёлкните по кнопке ОК.

Создание всплывающих кнопок

Видеоклипы не являются единственным типом анимации, которая доступна при работе с Front Page. ещё один популярный мультимедийный эффект -- всплывающая кнопка (hover button), внешний вид которой меняется, когда посетитель сайта наводит на неё указатель мыши.

Всплывающая кнопка представляет собой Java-апплет (программу), создаваемой Front Page. Вы можете использовать всплывающую кнопку для перехода к другой странице. Когда посетитель сайта  наводит указатель мыши на всплывающую кнопку, она реагирует на это, меняет цвет или принимает вид нажатой кнопки. Когда посетитель щёлкнет на этой кнопке, на экране появится страница, на которую была задана ссылка с  данной кнопки.

Создайте  всплывающую кнопку.

1. В меню File (Файл) откройте новую страницу в режиме Normal.
2. Щёлкните правой кнопкой мышки в любом месте страницы и из контекстного меню выберите Shared Borders. Откроется диалоговое окно Shared borders.
3. Установите галочки на Current Page и снимите галочку с Left, Top, Bottom. Нажмите ОК.
4. Страница окажется пустой. Сохраните страницу по названием content.htm.
5. В меню Insert (Вставка) выберите пункт Component(Компонент) и щёлкните на пункте Hover Button (Всплывающая кнопка). Откроется диалоговое окно Hover Button Properties (Свойство всплывающей кнопки).  Текст, находящийся в текстовом поле Button Text (Текст кнопки), уже выделен.
6. В текстовом поле Button Text (Текст кнопки) наберите Экзамены. При желании можете указать её ширину и высоту.
7. Щёлкните на стрелке поля Effect (Эффект). Развернётся список анимационных эффектов, которые могут быть заданы для всплывающей кнопки.
8. Выберите эффект Bevel In (Утопленная). Теперь кнопка будет выглядеть нажатой при наведении на неё указателя мыши.
9. Щёлкните по кнопке Browse (Просмотр). Откроется диалоговое окно Select Hover Button Hyperlink (Выбор гиперссылки для всплывающей кнопки). Пролистав список файлов, найдите файл prod01.htm и дважды щёлкните по кнопке ОК. Front Page создаст всплывающую кнопку с заданными свойствами.
10. Откройте диалоговое окно Save As (Сохранить как...) в меню File (Файл). Текст, находящийся в текстовом поле File Name (Имя файла) будет уже выделен. Нажмите кнопку Change (Изменить) и в текстовом поле Page Title (Название страницы) наберите Содержание. Нажмите дважды кнопку ОК, после чего проверьте работу кнопки в броузере.

Ещё один способ создать всплывающую кнопку с гиперссылкой -- щёлкнуть правой кнопкой мыши и в открывшемся меню щёлкнуть на пункте Hover Button Properties (Свойства всплывающей кнопки). Откроется соответствующее диалоговое окно. В текстовом поле Link To (Перейти к) выберите нужный Вам файл, щёлкните на нём и щёлкните по кнопке ОК.

Создайте на этой странице кнопки с названиями: Курсы, День открытых дверей, Деканат, Творческие успехи, Практика, Главная, расположив их друг под другом и назначив им соответствующие страницы. Их анимационные эффекты могут быть любыми, но лучше всегда помнить об общем виде и стиле сайта.

Продолжение следует...

Интернет-проект "От Анастасии", http://nasta.virtualave.net