Просмотр Web-страницы в браузере. Завершение работы с Web-страницей.

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

Если для оформления начальной страницы сайта вы использовали фоновый рисунок, проконтролируйте внешний вид страницы в режиме отключения графики. Для этого отключите загрузку рисунков (Сервис / Свойства обозревателя… / вкладка Дополнительно / в блоке Мультимедиа снимите флажок Отображать рисунки / ОК) и обновите текущую страницу (кнопка Обновить на панели инструментов). Вот сейчас и пригодится определенный нами в свойствах страницы цвет фона. Конечно, желательно, чтобы страница выглядела практически одинаково в режиме включения и отключения загрузки рисунки.

Кроме того, если для фонового рисунка вы дополнительно установили параметр Сделать подложкой, проверьте работоспособность этого параметра. Для этого включите загрузку рисунков и еще раз обновите текущую страницу. Затем уменьшите размеры рабочего окна Microsoft Internet Explorer так, чтобы появилась вертикальная полоса прокрутки. Воспользуйтесь полосой прокрутки и обратите внимание, что фоновый рисунок не прокручивается вместе с текстом страницы. Не забудьте после этого завершить работу с браузером и вернуться в Microsoft FrontPage.

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

Создание новых 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. Поэтому ваша задача выполнить