Интерфейс и основные представления в Microsoft Office FrontPage 2003

Урок 1

Интерфейс и основные представления в Microsoft Office FrontPage 2003

Запуск Microsoft Office FrontPage 2003.

Начнем с запуска программного продукта. После установки программы на ваш компьютер эта операция выполняется стандартным образом: необходимо последовательно выполнить команды Пуск / Программы / Microsoft Office / Microsoft Office FrontPage 2003 или же сделать двойной щелчок мышью по соответствующей пиктограмме на рабочем столе MS Windows.

Интерфейс Microsoft Office FrontPage 2003.

Рассмотрим основные элементы интерфейса программы. Рабочее окно Microsoft Office FrontPage 2003 представлено на рис. 1. В самом верху экрана расположена строка заголовка, где указано название программного продукта и наименование рабочего Web-документа (в данном случае новой Web-страницы, автоматически созданной при запуске программы), которому по умолчанию присваивается имя нов_стр_1.htm. Здесь же расположены кнопки управления окном программы: Свернуть, Восстановить, Закрыть. Ниже строки заголовка расположена строка меню, а под ней – панели инструментов Стандартная и Форматирование.

В правой части окна программы размещается область задач, содержащая часто используемые команды. Расположение и небольшие размеры этой области позволяют использовать команды меню, не прекращая работу над документами. В данном случае область задач Приступая к работе предлагает либо получить справочную информацию, либо приступить к созданию/открытию отдельных Web-страниц или же целых сайтов. Чтобы узнать, какие другие области задач предлагает FrontPage для упрощения доступа к тем или иным функциям, раскройте список в заголовке текущей области задач. В дальнейшем для быстрого перехода к нужной области задач достаточно просто выполнить щелчок мышью по названию этой области.

Слева от области задач расположено окно рабочего документа. В заголовке этого окна находится ярлык с именем открытого документа и кнопкой Закрыть, позволяющей завершить работу с текущей Web-страницей. Снизу и справа окно документа обрамлено полосами прокрутки. С левой стороны горизонтальной полосы прокрутки расположены кнопки Конструктор, С разделением, Код и Просмотр, управляющие режимами представления Web-страницы. Об этих режимах более подробно мы поговорим чуть позже.

И в самом низу рабочего окна расположена строка состояния, в которой отображается информация об ожидаемом времени загрузки документа из сети Интернет при заданной по умолчанию скорости соединения (в нашем случае 56 Кбит/с) и текущий размер страницы.

Как уже упоминалось выше, Microsoft FrontPage позволяет выполнять все операции по созданию, оформлению, публикации готового Web-сайта, а также по его дальнейшему сопровождению. Это означает, что ключевым рабочим объектом в Microsoft FrontPage является Web-сайт, а не единичная Web-страница, и работа во FrontPage начинается именно с создания нового сайта. Поэтому мы приступаем к рассмотрению вопроса

Создание нового Web-сайта.

Как вы знаете, для создания нового сайта можно воспользоваться командой Создать страницу или узел... в области задач Приступая к работе или выполнить команду Файл / Создать…, после чегов разделе Создать веб-узел области задач Создание выбрать команду Другие шаблоны веб-узлов…. Те, кому удобнее работать с панелями инструментов, могут вместо вышеуказанных действий просто отрыть список инструмента панели Стандартная и выбрать команду Веб-узел…

В прошлый раз мы уже говорили о том, что для создания нового сайта Microsoft FrontPage предлагает использовать шаблоны или мастера. Напомним лишь, что для самостоятельной разработки и оформления Web-сайта, как правило, используются шаблоны Одностраничный веб-узел или Пустой веб-узел. Поэтому в появившемся диалоговом окне Шаблоны веб-узлов выберите шаблон Одностраничный веб - узел, который позволяет создать сайт, содержащий пустую начальную страницу. А для определения местоположения нового сайта щелкните по кнопке Обзор…, откройте свою рабочую папку и, воспользовавшись кнопкой Создать папку диалогового окна Место для нового веб-узла, создайте корневую папку сайта с именем myweb2. С помощью кнопки Открыть вернитесь в окно создания нового сайта, убедитесь в правильности указания пути к корневой папке нового сайта и подтвердите создание сайта щелчком по кнопке ОК.

Как вы помните, при этом Microsoft FrontPage в корневую папку сайта помещает документ index.htm (начальную страницу сайта), папку images (для хранения графических изображений) и папку _private (невидимую для браузеров, для хранения любых файлов, которые необходимо держать скрытыми от посетителей сайта после его публикации).

На прошлом занятии мы рассмотрели основные элементы интерфейса Microsoft FrontPage 2003. А сейчас познакомимся с тем, как управлять отображением этих элементов на экране. Однако предварительно двойным щелчком мыши откройте в режиме редактирования начальную страницу сайта index.htm.

Создание новых Web-страниц.

Нам осталось добавить в наш сайт еще несколько страниц, оформив их точно по такому же образцу, как и начальную страницу сайта.

Для создания новой Web-страницы можно воспользоваться командой Файл / Создать…, после чегов разделе Создать страницу области задач Создание выбрать команду Другие шаблоны страниц… Или же отройте список инструмента панели Стандартная и выберите команду Страница…

И в том, и в другом случае на экране появится диалоговое окно Шаблоны страниц (рис. 10). Как и при создании сайта, для создания отдельных страниц Microsoft FrontPage также предлагает использовать шаблоны. Заметьте, что в диалоговом окне создания нового Web-документа представлены три вкладки, позволяющие реализовать создание документов различного типа: на вкладке Общие расположены шаблоны для создания обычных Web-страниц, на вкладке Страница рамок – для создания страниц, содержащих фреймы, а вкладка Таблицы стилей содержит шаблоны для создания внешних таблиц стилей (CSS-файлов). О фреймах и таблицах стилей мы поговорим позже, а сейчас обсудим вопросы создания обычных Web-страниц.

Шаблон Web-страницыопределяет макет и основную структуру документа. Поэтому использование шаблонов значительно упрощает задачу подготовки нового Web-документа, т.к. при этом создается готовая Web-страница, содержащая примерный текст и элементы оформления. Для создания пустой Web-страницы используется шаблон Обычная страница. Этот шаблон не содержит никаких элементов оформления и позволяет создавать Web-страницу «с нуля». Воспользуемся этим шаблоном для создания второй страницы нашего сайта.

Посвятим эту страницу рассказу об основных вехах своей жизни. Прежде всего настройте общие параметры новой страницы, определив для нее в качестве названия текст Фамилия Имя Отчество | Биография, задайте цветовое оформление новой страницы в соответствии с оформлением начальной страницы сайта (определите такой же фоновый рисунок, как и для начальной страницы (не забудьте, что теперь фоновый рисунок хранится в папке images нашего сайта myweb2), те же цвета фона и текста), определите в качестве языка документа русский и кириллицу в качестве кодировки, используемой при сохранении Web-страницы (см. п. 4).

Далее на Web-страницу поместите заголовок Моя биография. Примените к заголовку Web-страницы стиль Заголовок 1,выровняйте его по центру, измените цвет заголовка. Под заголовком вставьте горизонтальную линию и настройте ее параметры (см. п. 5). Под горизонтальной линией введите краткие сведения о своей жизни.

В заключение не забудьте сохранить новую Web-страницу под именем biography.htm в папке сайта myweb2 (см. п. 6.), протестировать ее в браузере и завершить с ней работу (см. п. 7).

Аналогичным образом создайте еще одну новую Web-страницу, посвященную вашим увлечениям. Сохраните ее под именем hobby.htm в папке сайта myweb2 и протестируйте в браузере.

В результате наш персональный сайт должен содержать три Web-страницы:

- index.htm – начальная страница сайта;

- biography.htm – страница с краткими биографическими сведениями;

- hobby.htm – страница, содержащая информацию об увлечениях.

А вот о том, как эти страницы связать с помощью гиперссылок и дополнительно оформить, мы поговорим в следующий раз. На этом наше сегодняшнее занятие мы заканчиваем. Не забудьте выполнить

9. Завершение работы с Microsoft Office FrontPage 2003 с помощью команды Файл / Выход или кнопки cтроки заголовка программы.

Урок 3

Вставка и редактирование гиперссылок

Как вы помните, на прошлом занятии мы начали работу над персональным сайтом, который к концу занятия уже содержал три Web-страницы: index.htm – начальная страница сайта; biography.htm – страница с краткими биографическими сведениями и hobby.htm – страница, содержащая информацию об увлечениях. Сегодня мы поговорим о том, как эти страницы связать с помощью гиперссылок. Для начала выполните

1. Запуск Microsoft Office FrontPage 2003 с помощью команды Пуск / Программы / Microsoft Office / Microsoft Office FrontPage 2003.

Естественно для дальнейшей работы нам понадобится сайт myweb2, созданный на прошлом занятии. Если при запуске Microsoft FrontPage этот сайт автоматически открылся как последний использовавшийся, тогда вы сразу можете приступать к п.3. В противном случае вам дополнительно придется выполнить

Открытие Web-сайта, созданного на прошлом занятии.

Чтобы открыть ранее созданный сайт, проще всего воспользоваться разделом Открыть области задач Приступая к работе. В этом разделе перечислены последние использовавшиеся сайты и для открытия любого сайта достаточно выполнить щелчок мышью по его имени. В случае, если в этом разделе отсутствует название нужного сайта, воспользуйтесь командой Дополнительно…, после чего в появившемся диалоговом окне Открытие веб-узла откройте свою рабочую папку, выделите корневую папку сайта myweb2 и подтвердите открытие сайта с помощью кнопки Открыть. Вызвать диалоговое окно Открытие веб-узла можно также с помощью команды Файл / Открыть узел… или же отрыв список инструмента панели Стандартная и выбрав команду Открыть узел…

 

3. Вставка и редактирование гиперссылок.

Итак, сегодня мы поговорим о создании гиперссылок. Любая гиперссылка включает в себя так называемый указатель гиперссылки (фрагмент текста или графический объект, которые станут ссылкой) и адресную часть (адрес ресурса назначения, на который указывает гиперссылка). В результате, общий алгоритм создания гиперссылки следующий: необходимо выделить фрагмент текста или графический объект, которые будут использоваться в качестве ссылки, затем выполнить команду Вставка / Гиперссылка… или воспользоваться кнопкой панели инструментов Стандартная и в диалоговом окне Добавление гиперссылки (рис. 11) указать ресурс назначения.

Рассмотрим более подробно элементы окна Добавление гиперссылки. В поле Текст указывается текст, который должен отображаться в виде гиперссылки (при назначении гиперссылки рисунку этот параметр становится недоступным). Кнопка Подсказка… позволяет создать для гиперссылки текстовую подсказку, отображаемую в браузере при наведении курсора мыши на ссылку. В разделе Связать с необходимо определить тип создаваемой гиперссылки. Обратите внимание, что ссылка может указывать на любой существующий файл, на определенное место в документе (для чего используются предварительно созданные закладки), на новый, пока еще не существующий документ (FrontPage предложит вам его создать) и на адрес электронной почты. Для создания гиперссылки на какой-либо внешний ресурс сети Интернет адрес этого ресурса (URL) необходимо указать в поле Адрес.

Вооружившись нужными знаниями, попробуем применить их на практике. Двойным щелчком мыши откройте в режиме редактирования начальную страницу сайта index.htm. Создадим ссылку для перехода к документу biography.htm. Для этого выделите в тексте нашей Web-страницы слово «биографией», которое будет использоваться в качестве указателя ссылки, и выполните команду Вставка / Гиперссылка… или же воспользуйтесь кнопкой панели Стандартная. Далее в диалоговом окне Добавление гиперссылки (рис. 11) проверьте, что в разделе Связать с выбран вариант файлом, веб-страницей. Обратите внимание, что при этом вам предлагается выбрать требуемый документ из папки сайта myweb2, что нам и нужно (для создания гиперссылки на любой другой существующий файл, расположенный вне папки нашего сайта, используетсякнопка Поиск файла, которая и позволяет выбрать документ назначения). Щелчком мыши выберите документ biography.htm. Обратите внимание, что после выбора требуемого файла в поле Адрес отобразится относительный путь к указанному файлу. Не забудьте подтвердить создание ссылки щелчком по кнопке ОК.

Итак, наша первая ссылка готова. Проверим ее работоспособность.Сохраните изменения начальной страницы сайта (кнопка на панели Стандартная) и включите просмотр Web-страницы в браузере (кнопка на панели Стандартная). Выполните щелчок по созданной ссылке и убедитесь в том, что она приводит нас к странице с краткими биографическими сведениями. Не забудьте после этого завершить работу с браузером и вернуться в Microsoft FrontPage.

Аналогичным образом создайте гиперссылку на документ hobby.htm, используя в качестве указателя ссылки слово «увлечениями». Сохраните Web-страницу и протестируйте новую ссылку в браузере, после чего вернитесь в Microsoft FrontPage.

Таким нехитрым способом мы связали три Web-страницы нашего сайта. А теперь поговорим о других типах создаваемых гиперссылок. Добавим на начальную страницу сайта ссылку на адрес электронной почты, чтобы поддерживать обратную связь с будущими посетителями нашего сайта. Выделите свою фамилию и инициалы(после символа авторского права ©) и снова выполните команду Вставка / Гиперссылка… или же воспользуйтесь кнопкой панели Стандартная. В диалоговом окне Добавление гиперссылки в разделе Связать с выберите вариант электронной почтой и в поле Адрес эл. почты введите свой адрес электронной почты (например, [email protected]). Заметьте, что передадресом электронной почты FrontPage автоматически добавит протокол mailto с двоеточием. В поле Тема при желании можно указать тему сообщения электронной почты. Подтвердите создание гиперссылки с помощью кнопки ОК. Сохраните Web-страницу и просмотрите в браузере. Выполните щелчок мышью по своей фамилии и убедитесь в том, что при этом будет создано новое почтовое сообщение, а ваш адрес электронной почты автоматически появится в поле Кому соответствующего письма. Закройте электронное письмо и завершите работу с браузером.

Рассмотрим, каким образом создаются гиперссылки, указывающие не просто на другой документ, а на определенное место в этом документе. Как уже упоминалось выше, для создания подобной гиперссылки используются предварительно созданные закладки. Вначале в документе назначения с помощью команды Вставка / Закладка… требуемое место помечается именной закладкой, а затем создается гиперссылка на данную закладку. Продемонстрируем это на примере. Добавим на начальную страницу сайта ссылку, реализующую переход в начало документа, т.е. к заголовку. Итак, установите текстовый курсор перед заголовком Личный сайт Фамилия Имя Отчество и выполните команду Вставка / Закладка…, в поле Имя закладки введите head и щелкните по кнопке ОК. Обратите внимание, что после создания закладки в указанном месте документа появится пиктограмма в виде флажка. После этого перед информацией об авторских правах создайте новый текстовый абзац и введите: Вверх. А сейчас нам осталось превратить это введенное слово в ссылку на только что созданную закладку head. Для этого выделите слово «Вверх», выполните команду Вставка / Гиперссылка… или щелкните по кнопке на панели Стандартная и в диалоговом окне Добавление гиперссылки в разделе Связать с выберите вариант местом в документе, щелчком мыши выберите закладку head и подтвердите создание гиперссылки с помощью кнопки ОК. Сохраните Web-страницу и просмотрите в браузере. Т.к. начальная страница нашего сайта содержит мало информации, вполне вероятно, что для тестирования созданной ссылки вам придется предварительно уменьшить размеры рабочего окна браузера так, чтобы при просмотре последних строк документа заголовок скрывался. Вот тогда наша ссылка покажет себя во всей красе: вместо того, чтобы приводить нас к другому документу, она вернет нас в начало нашего же документа. Завершите работу с браузером и вернитесь в Microsoft FrontPage.

В заключение рассмотрим, каким образом создаются гиперссылки на внешние ресурсы сети Интернет. Чтобы это продемонстрировать на примере, создадим новую Web-страницу, которая будет содержать список адресов интересных ресурсов Интернета.

Для этого отройте список инструмента панели Стандартная, выберите команду Страница… и в диалоговом окне Шаблоны страниц выберите шаблон Обычная страница. Как вы помните, вначале необходимо настроить общие параметры новой страницы, для чего выполните щелчок правой кнопкой мыши в любом месте на странице и в появившемся контекстном меню выберите Свойства страницы…. Определите для нового документа в качестве названия текст Фамилия Имя Отчество | Избранные ссылки, задайте цветовое оформление новой страницы в соответствии с оформлением начальной страницы сайта (определите такой же фоновый рисунок, как и для начальной страницы (фоновый рисунок хранится в папке images нашего сайта myweb2), те же цвета фона и текста), определите в качестве языка документа русский и кириллицу в качестве кодировки, используемой при сохранении Web-страницы. Далее на Web-страницу поместите заголовок Мои любимые адреса. Примените к заголовку Web-страницы стиль Заголовок 1, выровняйте его по центру, измените цвет заголовка. Под заголовком вставьте горизонтальную линию и настройте ее параметры.

Вот теперь можно приступать к созданию гиперссылок на ваши любимые Интернет-ресурсы. Самый простой способ создания гиперссылки на какой-либо внешний ресурс сети Интернет – это ввод адреса этого ресурса непосредственно в документ. Попробуйте, например, после горизонтальной линии ввести адрес www.lib.ru и нажать на клавишу Enter или просто на пробел. Обратите внимание, что Microsoft FrontPage автоматически создаст соответствующую гиперссылку. Точно так же можно создать гиперссылку и на адрес электронной почты: необходимо ввести нужный адрес в документ. Однако такой способ создания ссылок плох тем, что вашим посетителям будет совершенно не понятно, куда их приведет эта ссылка. Гораздо приятнее видеть в качестве ссылки название ресурса. Организуем ссылку на библиотеку Максима Мошкова по всем правилам. Удалите созданную Microsoft FrontPage ссылку www.lib.ru и введите название ресурса: Электронная библиотека Максима Мошкова. Далее выделите слова «Электронная библиотека Максима Мошкова», выполните команду Вставка / Гиперссылка… или щелкните по кнопке на панели Стандартная и в диалоговом окне Добавление гиперссылки в разделе Связать с выберите вариант файлом, веб-страницей. После чего в поле Адрес введите полный Интернет-адрес ресурса: http://www.lib.ru и щелкните по кнопке ОК, чтобы завершить создание ссылки.

C помощью инструмента панели Стандартная сохраните новую Web-страницу под именем favorite.htm в папке сайта myweb2 и, воспользовавшись инструментом панели Стандартная, проверьте работоспособность ссылки в браузере. Обратите внимание, что по щелчку новый ресурс будет открываться в том же самом окне браузера, тем самым сменяя собой наш сайт. А это означает, что таким образом мы можем растерять своих посетителей. Хотелось бы, чтобы внешние ресурсы, уводящие с нашего сайта, открывались в отдельных окнах. Чтобы изменить нашу гиперссылку, вернитесь в Microsoft FrontPage и, выполнив щелчок правой кнопкой мыши по ссылке, выберите команду Свойства гиперссылки… На экране появится диалоговое окно Изменение гиперссылки, полностью идентичноеуже знакомому нам окну создания ссылки. Это окно вы можете использовать для изменения адреса ресурса назначения, для удаления гиперссылки или для настройки параметров существующей ссылки. Нам необходимо, чтобы существующая ссылка открывалась в новом окне браузера. Чтобы это установить, щелкните по кнопке Выбор рамки…, в списке Общие объекты выберите Новое окно и щелкните по кнопке ОК. Подтвердите изменение текущей ссылки с помощью кнопки ОК. Еще раз сохраните Web-страницу и включите просмотр страницы в браузере. Убедитесь в том, что сейчас библиотека Мошкова действительно открывается в отдельном окне. Завершите работу с браузером и, вернувшись в Microsoft FrontPage, аналогичным образом добавьте в документ favorite.htm еще несколько ссылок на интересные Интернет-ресурсы, настроив для них загрузку в новом окне. Не забудьте сохранить изменения в документе и протестировать новые ссылки в браузере. После завершения работы с документом закройте его с помощью команды Файл / Закрыть или воспользовавшись кнопкой в заголовке окна документа.

В заключение, поскольку в нашем сайте появилась новая страница, хотелось бы в начальную страницу сайта index.htm добавить гиперссылку на новый документ. Создайте гиперссылку на документ favorite.htm, используя в качестве указателя ссылки текст «список адресов интересных ресурсов Интернета». Сохраните Web-страницу и проверьте работоспособность ссылки в браузере.

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

9. Завершение работы с Microsoft Office FrontPage 2003 с помощью команды Файл / Выход или кнопки cтроки заголовка программы.

Урок 4

Вставка и управление параметрами графических изображений

Сегодня, как и было обещано, мы поговорим об использовании рисунков на Web-страницах. Чаще всего графические изображения выступают в качестве средства оформления Web-документов. Например, мы уже знаем, что рисунок может использоваться в качестве фона Web-страницы. Кроме того, графические изображения можно добавлять непосредственно на Web-страницу для отображения всевозможных иллюстраций. Вот об этой возможности мы и поговорим более подробно, продолжая работу над нашим учебным персональным сайтом myweb2. Поэтому ваша задача выполнить

Открытие Web-сайта myweb2, созданного на предыдущих занятиях.

 

3. Вставка графических изображений.

В качестве примера украсим домашнюю страницу нашего сайта какой-либо картинкой. Проведем для этого небольшую подготовительную работу. Двойным щелчком мыши откройте в режиме редактирования начальную страницу сайта index.htm и создайте пустой абзац после горизонтальной линии (именно сюда мы и будем вставлять рисунок). Далее, как обычно, установите текстовый курсор в новый абзац и выполните команду Вставка / Рисунок. Заметьте, что в открывшемся подменю содержатся команды, реализующие возможность добавления на страницу рисунков разных типов и из различных источников. Обсудим эти команды более подробно.

Команда Картинки позволяет воспользоваться коллекцией картинок от компании Microsoft, содержащей мультимедийные файлы (рисунки, фотографии, звуки, видео), обычно называемые просто клипами, которые можно использовать во всех документах Microsoft Office. Команда Из файла, как нетрудно догадаться, позволяет вставить на Web-страницу любой заранее подготовленный и сохраненный в виде файла рисунок. После выбора этой команды вам останется указать, где именно хранится нужное графическое изображение и как называется соответствующий файл. Команда Со сканера или камеры позволяет добавлять в документ рисунки, полученные со сканера или цифровой камеры.

Команда Создать фотоколлекцию поможет вам при необходимости помещения на Web-страницу целого набора фотографий или картинок. Выбрав эту команду, вы должны указать, какие именно рисунки будут демонстрироваться в коллекции, а также выбрать макет, в соответствии с которым указанные рисунки будут располагаться в вашей коллекции. При создании подобной коллекции в нее может быть добавлено любое число фотографий, кроме того, для каждой фотографии можно задать название и описание. Как правило, при создании подобных фотоколлекций используются так называемые эскизы – миниатюрное представление рисунка на Web-странице, выполненное в виде гиперссылки на полноразмерную версию рисунка. Эскизы являются средством, позволяющим ускорить загрузку Web-страниц, содержащих большое количество рисунков и фотографий.

Ранее мы уже говорили о том, что в Microsoft FrontPage 2003 добавлена возможность вставки объектов Macromedia Flash. И эта замечательная возможность реализована в виде команды Фильм в формате Flash. Вам останется только указать местоположение и название Flash-ролика, а всю остальную работу за вас сделает FrontPage.

Команды Создать рисунок и Автофигуры позволяют на Web-страницу поместить рисунок, созданный с помощью панели Рисование. На этой панели вы найдете инструменты для создания и оформления всевозможных прямоугольников, овалов, линий, стрелок, элементов блок-схемы и т.д. Команда Объект WordArt позволяет помещать на Web-страницу текстовые эффекты. Например, для украшения документа можно создать объемную надпись с тенью.

И последняя команда Видеозапись позволяет вставить на Web-страницу видеоклип. Естественно, в этом случае придется указать местоположение и название соответствующего файла.

Итак, добавим на домашнюю страницу сайта графический рисунок из Коллекции картинок (Microsoft). Установив текстовый курсор в новый пустой абзац и выполнив уже известную нам команду Вставка / Рисунок / Картинки…, отобразим на экране область задач Коллекция клипов для выбора требуемого рисунка. В поле Искать области задач Коллекция клипов необходимо ввести слово или фразу, описывающие нужный клип. Например, введите слово «люди» (рис. 12). В случае необходимости можно ограничить поиск с помощью полей Просматривать и Искать объекты: поле Просматривать позволяет указать, в каких именно коллекциях требуется осуществлять поиск, а поле Искать объекты предлагает уточнить требуемый тип мультимедийных файлов. Оставьте в поле Просматривать вариант Все коллекции, а вот в поле Искать объекты уточните, что нас интересуют только графические изображения, для чего раскройте список этого поля и снимите флажки для фильмов и звуков. Вот теперь щелкните по кнопке Начать, чтобы приступить к поиску рисунков. Просмотрите результаты поиска и, выбрав понравившийся рисунок, щелкните по нему мышью для вставки на Web-страницу. Вот и вся нехитрая технология добавления картинок на Web-страницу.

Естественно, в любой момент вы можете удалить ненужные графические изображения. Для этого изображение необходимо выделить и нажать клавишу Delete на клавиатуре.

В том случае если подобный поиск не дал удовлетворительных результатов, можно просмотреть все имеющиеся клипы в коллекции картинок. Для этого следует в нижней части области задач Коллекция клипов выбрать команду Упорядочить картинки… При этом вначале может появиться окно Добавление клипов в коллекцию, в котором вам предложат провести систематизацию мультимедийных файлов. Чтобы не тратить на это время, щелкните по кнопке Позже этого диалогового окна. Вот сейчас вы попадете в окно просмотра Коллекции картинок (Microsoft). Заметьте, что клипы в этом окне разделяются на коллекции. К примеру, Коллекции Microsoft Office содержат файлы мультимедиа, поставляемые с приложениями Microsoft Office. Выбрав эту коллекцию, вы можете уточнить интересующую вас тематическую категорию, а дальше приступить к просмотру клипов, входящих в выбранную категорию. Для вставки на Web-страницу понравившейся картинки достаточно просто перетащить с помощью мыши выбранный клип в нужное место открытого документа. Не забудьте после этого закрыть окно коллекции картинок.

Если же и этот вариант вам не помог, при наличии подключения к сети Интернет вы можете просмотреть содержимое коллекции картинок на Web-сайте Microsoft Office Online. Для этого предназначена команда Картинки на узле Office Online в нижней части области задач Коллекция клипов.

А сейчас поговорим о том, что можно сделать со вставленным на Web-страницу рисунком.

Открытие Web-сайта myweb2, созданного на предыдущих занятиях.

 

3. Изменение графических изображений, добавленных на Web-страницу.

Как вы помните, на прошлом занятии мы добавили на домашнюю страницу сайта графический рисунок из Коллекции картинок (Microsoft). На примере этого рисунка рассмотрим, какие средства изменения рисунков предоставляет Microsoft FrontPage.

Прежде всего, еще раз вспомним об изменении размеров графических изображений. Выполнить настройку размеров рисунка можно либо с помощью мыши, либо с помощью диалогового окна Свойства рисунка, вызываемогощелчком правой кнопкой мыши по рисунку. Однако и том, и в другом случае изменяются лишь значения атрибутов для тегов языка HTML, задающие отображение этого элемента, размер же графического файла при этом не изменяется. А это означает, что после изменения размера рисунка он просто будет отображаться в меньшей области экрана при его просмотре в браузере, а размер файла и время загрузки этого элемента не изменятся. Чтобы в этом убедиться, проведем маленький эксперимент.

Двойным щелчком мыши откройте в режиме редактирования начальную страницу сайта index.htm. Знакомясь с интерфейсом программы, мы упоминали о том, что с левой стороны горизонтальной полосы прокрутки расположены кнопки, управляющие режимами представления Web-страницы. До сих пор мы работали с Web-документами в представлении Конструктор, реализующем режим визуального проектирования Web-страницы. Для просмотра и редактирования генерируемого Microsoft FrontPage HTML-кода текущего документа используется представление Код. Однако зачастую удобнее использовать представление С разделением, сочетающее визуальное проектирование с одновременным просмотром генерируемого HTML-кода. Переключитесь к представлению С разделением. Чтобы определить, какой фрагмент HTML-кода описывает интересующий вас объект Web-страницы, просто выделите этот объект в нижней части экрана. Попробуйте щелчком мыши выделить рисунок, и в верхней части экрана Microsoft FrontPage выделит строку кода, отвечающую за отображение рисунка на Web-странице (рис. 16). Читатели, хотя бы немного владеющие английским языком, сразу же догадаются, что в этой строке img (от англ. image, рисунок) – тег, предназначенный для вставки рисунков; src (от англ. source, источник) – атрибут, задающий местоположение рисунка; alt (от англ. alternative, альтернатива) – атрибут, определяющий альтернативный (или замещающий) текст для графического изображения; а width и height – это атрибуты, задающие размеры рисунка (ширину и высоту соответственно). Обратите внимание на место хранения и имя файла вставленного в документ рисунка. А сейчас определим размер файла используемого графического изображения. Для этого переключитесь к отображению содержимого сайта, выполнив щелчок по ярлыку веб-узел в верхней части экрана, и двойным щелчком мыши откройте папку images, в которой хранятся все рисунки нашего сайта. В столбце Размер заметьте размер интересующего нас графического файла. Вернитесь к домашней странице сайта, щелкнув по ярлыку с именем документа index.htm. С помощью мыши уменьшите размеры рисунка (обратите внимание, что при этом будут изменены значения атрибутов width и height в верхней части экрана). Сохраните изменения начальной страницы сайта (инструмент панели Стандартная), еще раз переключитесь к отображению содержимого папки images и снова определите размер графического файла. Заметьте, что размер файла не изменился. А раз размер файла остался неизменным, значит и время загрузки этого элемента тоже не изменится.

И вот тут-то, если вас, конечно, волнует проблема уменьшения времени загрузки сайта, может пригодиться помощь Microsoft FrontPage. Дело в том, что при изменении размеров рисунка FrontPage позволяет также изменить размер рисунка в пикселях в соответствии с текущим размером на экране. При этом естественно будет изменен и размер файла графического изображения. Понятно, что в случае уменьшения размеров рисунка размер файла также будет уменьшен. Очень удобная особенность программы. Проиллюстрируем это на нашем примере.

Вернитесь к домашней странице сайта, выбрав ярлык с именем документа. Наверняка вы уже и раньше заметили, что при изменении размеров под рисунком тут же появляется кнопка Действия с рисунками (рисунок при этом должен быть выделен). Выполнив щелчок по этому инструменту, вы сможете дополнительно указать, что Microsoft FrontPage должен сделать с рисунком: только изменить значения атрибутов, задающих размеры рисунка, или же изменить сам рисунок в соответствии с заданным на экране размером. Выберите из списка второй вариант Изменить рисунок в соответствии с размером и сохраните изменения начальной страницы сайта. Т.к. в данном случае FrontPage должен сформировать новое графическое изображение, на экран будет выведено диалоговое окно Сохранение внедренных файлов с запросом о замене графического изображения. Щелчком по кнопке ОК подтвердите сохранение нового варианта изображения под тем же именем. (Обратите внимание, что после этого инструмент исчезает.) А сейчас выберите ярлык веб-узел и снова определите размер графического файла. Наверняка он стал меньше, что и требовалось доказать.

При желании вы можете вернуться в корневую папку сайта myweb2 с помощью инструмента На уровень выше, расположенного в правом верхнем углу. После этого перейдите к домашней странице сайта и продолжим наше исследование средств изменения рисунков, предоставляемых Microsoft FrontPage. Кстати, если вам не очен