Учебное пособие 2140

МИНИСТЕРСТВО ОБРАЗОВАНИЯ РОССИЙСКОЙ ФЕДЕРАЦИИ

Воронежский государственный технический университет

И.Н. Пантелеев

ПРАКТИКУМ ПО ИНФОРМАЦИОННЫМ ТЕХНОЛОГИЯМ

(Часть 2)

Учебное пособие

УДК 681.3.06(075)

Пантелеев И.Н. Практикум по информационным технологиям (часть 1): Учеб. пособие. Воронеж. гос. техн. ун-

т, 2003. 149 с.

Учебное пособие включает материал необходимый для подготовки к лабораторным занятиям в Internet-классе. Во второй части представлен материал по созданию web-страниц и их редактированию с вставкой рисунков, таблиц, гиперссылок, вопросы разработки web-сайта, а также рассмотрены сведения о создании HTML-документов.

Издание предназначено для студентов инженерных специальностей вузов при изучении курсов «Информатика» и «Информационные технологии».

Учебное пособие подготовлено на магнитном носителе в текстовом редакторе MS Word 2000 и содержится в файле

"Pos2_InTx . rar".

Ил. 108. Библиогр.: 5 назв.

Рецензенты: кафедра математики и физики Воронежского Военного института радиоэлектроники; канд. физ.-мат. наук В.И. Ковалевский

Издается по решению редакционно-издательского совета Воронежского государственного технического университета

Пантелеев И.Н., 2003

Оформление. Воронежский государственный технический университет, 2003

5. Создание web-страниц

Основным элементом WWW является web-страница — текст, размеченный специальными маркерами-тегами, которые обеспечивают определенный внешний вид материала и его связи с другими страницами. Все web-страницы записываются на специальном языке HTML. Сегодня технология WWW позволяет пользователям создавать web-страницы, которые посредством гиперссылок связаны с другими страницами и прочими размещенными в Интернете ресурсами.

Примечание. HTML — язык разметки гипертекста (Hypertext Markup Language), используемый при создании web-страниц. Гиперссылка — выделенный фрагмент документа (текст, иллюстрация), с которым ассоциирован адрес другого webдокумента.

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

Совокупность web-страниц, связанных между собой взаимными гиперссылками, называется web-узлом, или web-сайтом. Web-сайт располагается на web-сервере в определенной папке этого сервера. Наиболее распространены два типа web-серверов: на платформе Unix (или Linux) — обычно сервер Apache, на платформе Windows NT или Windows

2000 — сервер US (Internet Information Server). Размещение на сервере гипертекстовых материалов называется web-публикацией (изданием).

Web-сайт имеет стартовую страницу — страницу, которая открывается web-браузером при обращении к сайту, например, при обращении по адресу: http://vrn.fio.ru загружается страница index.html (Unix) или default.html (Windows).

Для просмотра web-страниц используются специализированные средства, называемые web-браузерами (в некоторой литературе — броузеры).

Важной особенностью WWW является его рост огромными темпами. Свои собственные web-сайты есть уже у тысяч людей и сотен тысяч компаний (для обозначения web-сайта часто используется термин homepage (домашняя страница), в действительности домашняя страница — это открывающая страница web-сайта, содержащая в основном ссылки на другие страницы). За последние несколько лет Интернет и WWW самым радикальным образом изменили деловые привычки людей. Теперь стало нормой указывать на визитных карточках свои адреса электронной почты

(e-mail и www).

Примечание. Первым заметным web-браузером был Mosaic,

разработанный в NCSA (National Center for Super-computing

Applications, Национальный центр суперкомпьютерных приложений в Иллинойском университете, Урбана-Шампань). Сейчас на рынке насчитывается свыше двух десятков браузеров, и их число продолжает расти. Львиную долю рынка web-браузеров на текущий момент делят Netscape Navigator и

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

5.1. Процесс разработки web-сайта

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

Если вы задерживаетесь на каком-либо сайте на длительное время и даже не осознаете этого, то, по всей видимости, такой сайт очень хорошо продуман. Вернитесь обратно и попробуйте осмыслить полную картину. Можете ли вы увидеть структуру, организацию? Легко ли воспринимается информация? Понимание движения информационных потоков — это первый шаг в создании функционального, удобного в работе сайта.

5.1.1. Планирование информационного потока

Многие web-мастера не тратят время на то, чтобы продумать информационный поток, а ограничиваются только размещением текста и изображений на странице. Хотя на многих сайтах вы можете встретить хвастливые уверения, что у них гораздо больше посетителей, чем у конкурентов, однако это не самый лучший индикатор качества исполнения. Лучшим показателем является время: если пользователи остаются на вашем сайте достаточно долго, чтобы пройти по разным его уровням и разделам, можете быть вполне уверенными в хорошо выполненной работе. Это означает, что они могут найти то, что им нужно, осмотреть остальное и без особого труда вернуться обратно.

Чтобы сделать свой сайт эффективным, вы должны визуализировать поток информации и выбираемые пользователем пути. Другими словами, вы должны видеть свой сайт с точки зрения пользователя.

Как построить хороший сайт

Самые лучшие web-сайты — те, которые привлекательно выглядят, емко выражают основную идею и не заставляют пользователей ждать получения информации на их экранах слишком долго. Вот несколько советов по созданию успешного сайта.

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

2.Обязательно думайте о своей аудитории. Кто будет основными (и вторичными) посетителями вашего сайта? Какого они возраста? Чем занимаются? Сколько времени проводят на вашем сайте? В отношении каждой порции информации, каждой картинки и каждой детали спросите себя, как отреагирует на это ваша аудитория.

3.Используйте быстро загружаемые элементы. Основная причина, по которой люди быстро уходят с сайта (или не посещают его вторично),

—слишком долгая загрузка информации. Большой объем графических файлов вызывает желание как-то повлиять на ход событий, и самое простое

—нажать кнопку Stop, остановив загрузку.

4.Сделайте ваш сайт визуально привлекательным. Вы, несомненно, видели в Интернете немало скучных сайтов. Что же делает их неинтересными? Возможно, недостаток цвета и разнообразия текста, заголовков. Вы, вероятно, видели также беспорядочные и эклектичные сайты, в которых используется слишком много шрифтов разных размеров или слишком много цветов. Создавая собственный сайт, помните, что продуманное форматирование страниц приблизит вас еще на один шаг к заветной цели.

5.Не пытайтесь разместить все на одной странице. Будьте внимательны, не перегружайте свои страницы слишком большим количеством информации. Думайте о тех, кто будет читать ваши страницы, о том, как трудно воспринимается большое количество текста на экране компьютера, и наполняйте страницы содержимым в соответствии с этим. Попробуйте добавить пустое пространство, увеличивая поля страницы, или используйте табличное размещение текста. Размещая на страницах графику, имейте в виду ее реальное значение: служит ли она основной цели или работает только как украшение? Но при этом не забывайте, что иногда красивая графика сама по себе может быть целью. В идеале каждый web-

сайт должен хорошо выглядеть, содержать полезную информацию и быть удобным для просмотра.

6. Разумно организуйте содержимое. Сколько раз при посещении очередного сайта вы говорили себе: «Здесь нет ничего интересного»? Возможно, где-то глубоко внутри и захоронено что-то ценное, но откопать это можно, лишь случайно на него натолкнувшись. Если у вас есть ваши посетители должны увидеть, не прячьте ее в глубь сайта. Сделайте важную информацию настолько легкодоступной, насколько это возможно. Не забывайте, что ваш сайт будет иметь, по всей видимости, не один уровень вложенности. Вторичный материал упорядочивайте по группам взаимосвязанной информации.

Совет. Мы часто склонны думать, что наш сайт обязательно будет замечен той аудиторией, которой он адресован; однако здесь очень легко промахнуться. Чтобы избежать этого, постарайтесь заранее обсудить план и содержание вашего сайта с как можно большим количеством людей, особенно потенциальных членов вашей аудитории.

7.Предусмотрите на сайте кнопки навигации. Большинство разработчиков используют кнопки, адресующие к различным разделам сайта. Эти кнопки, как правило, присутствуют на всех страницах сайта и обычно расположены плотной группой в одном месте страницы. Единообразие и компактность их расположения существенно упрощают просмотр вашего сайта. Пользователю достаточно просто нажать кнопку, чтобы перейти в другой раздел сайта.

Cовет. При планировании кнопок навигации старайтесь соблюсти нижеследующие рекомендации.

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

8.Воспользуйтесь картой навигации Проводника FrontPage. Карта навигации может оказаться особенно полезной, когда у вас возникнут трудности с представлением информации. Начните работу с главной страницы и идите вглубь. Это визуальное представление поможет вам «увидеть» содержимое вашего сайта, более ясно организовать его и

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

9.Тщательно протестируйте свой сайт. Проверьте работу вашего сайта, используя как можно больше различных браузеров, притом на различных платформах (как минимум Windows 95,98, NT, 2000, UNIX и Macintosh) и при различных скоростях модема. Нередко кнопка навигации, помещенная вами в угол страницы, в каком-нибудь браузере оказывается посреди окна. Опытные web-дизайнеры проверяют в своих сайтах каждую страницу и каждую ссылку в нескольких различных браузерах. Все связи внутри вашего сайта легко проверить в Microsoft FrontPage с помощью команды Проверить гиперссылки или протокола состояния гиперссылок Проводника FrontPage. Самый простой способ проверки вашего сайта — это операция Предварительный просмотр в браузере в редакторе FrontPage. Она позволит визуально исследовать вашу страницу в любом браузере, установленном на вашем компьютере и при различных размерах окна. Например, если вы обычно работаете при разрешении 1024x768, то сможете воочию посмотреть, как ваша страница будет выглядеть при разрешении 800x600.

10.Предоставьте посетителям возможность легко находить информацию на вашем сайте. Оснастить сайт полным механизмом поиска удобно с помощью Поискового компонента FrontPage.

При создании гипертекстового документа рекомендуется придерживаться следующего порядка действий:

• создается или берется из ранее подготовленного файла документ;

• текст размечается на параграфы, списки, заголовки и т. д.;

• вставляются ссылки на рисунки;

• вводятся текстовые связи;

• странице придается определенный внешний вид путем выделения отдельных фрагментов страницы различными шрифтами, размерами шрифтов, использования цвета и разных способов начертания символов, проведения линий, полос и т. п.;

• документ сохраняется в папке на жестком диске.

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

Для создания web-страниц используются следующие типы программных средств:

• деловые приложения Microsoft Office: Word, Excel, Acsess, PowerPoint, FrontPage Express;

• специализированные программные средства Netscape Composer, Microsoft FrontPage, Macromedia DreamWeaver и др.;

•нередки случаи, когда web-страницы пишутся в стандартном приложении Windows Блокнот и т. п.;

•широко известная в Интернете студия Лебедева (http://www.design.ru/) предлагает Парсер — средство для автоматизации процессов создания и обновления сайтов, страницы которых схожи по оформлению, содержанию или структуре.

Большинство продуктов, входящих в MS Office, например MS Word, позволяют создавать и редактировать web-страницы, а также преобразовывать существующие документы в web-страницы, что значительно ускоряет разработку web-документов, делает ее возможной без знания языка HTML. Рассмотрим пример создания web-страницы в Misrosoft Word 2002 — последней версии популярного текстового процессора.

Лабораторная работа 5.1

Создание web-страницы средствами приложения Microsoft Word

1. Запустите Microsoft Word и создайте новый файл документа, выбрав в меню Файл команду Создать. В окне Создание документа перейдите на вкладку Web-страница. В списке шаблонов выберите Личная Web-страница, установите флажок Создать документ и щелкните на кнопке ОК. В окне Microsoft Word раскроется окно документа, созданного по шаблону личной web-страницы, как показано на рис. 5.1.

Рис. 5.1. Окно Microsoft Word с документом, созданным по шаблону личной web-страницы

2. Введите соответствующий текст в документ, например отредактируйте раздел Работа следующим образом:

МОЯ РАБОТА Должность Преподаватель школы Основные обязанности

Обучение основам компьютерных технологий.

3. Так как текст закладки Работа был изменен на Моя работа, отредактируйте гиперссылку, для чего, установив указатель мыши на слове Работа в разделе Оглавление, щелкните правой кнопкой мыши и в контекстном меню выберите команды Гиперссылка > Изменить гиперссылку.

В окне Изменение гиперссылки укажите место в документе Моя работа и щелкните на кнопке ОК, как показано на рис. 5.2.

Рис. 5.2. Изменение гиперссылки

4.Из раздела Оглавление удалите Избранные ссылки, Адреса, Текущие проекты, выделив их и нажав клавишу Delete.

5.Выделите и удалите из документа разделы, соответствующие ссылкам, удаленным на шаге 4.

6.Отредактируйте раздел Увлечения, изменив его название на Хобби, и вместо текста Добавьте увлечение введите текст по вашему усмотрению, например автомобили, рыбалка, шахматы и т. п.

7.Создайте закладку в текущем документе на слове Хобби, для чего, указав место закладки, выберите в меню Вставка команду Закладка. В окне Закладка введите имя закладки, например Хобби, как показано на рис. 5.3,

ищелкните на кнопке Добавить.

Рис. 5.3. Добавление закладки на начало раздела Хобби 8. Перейдите в раздел Оглавление и добавьте гиперссылку к

созданной на шаге 7 закладке, для чего, выделив текст Хобби, выберите команду Гиперссылка в меню Вставка, в окне Добавление гиперссылки, раскрыв список закладок, выберите нужную закладку Хобби и щелкните на кнопке ОК (рис. 5.4).

Рис. 5.4. Добавление гиперссылки на закладку Хобби

9.Добавьте в раздел Биографические сведения текст Пишите мне и создайте на нем гиперссылку на адрес электронной почты Petrov@mail.ru. Для этого, выделив текст Пишите мне, в меню Вставка выберите команду Гиперссылка, в окне Добавление гиперссылки щелкните на кнопке 4 электронной почтой, в поле Электронная почта введите адрес Petrov@mai I. ru и щелкните на кнопке О К, как показано на рис. 5.5.

10.Добавьте в раздел Биографические сведения фотографию, для чего, указав место вставки рисунка, выберите команду Вставка > Рисунок > Из файла. В окне Добавить рисунок выберите диск, папку, укажите файл рисунка и щелкните на кнопке Вставка.

11.Добавьте на текст автомобили в разделе Хобби гиперссылку на адрес: http:// www.auto.ru, для чего, выделив текст автомобили, в меню Вставка выберите команду Гиперссылка. В окне Добавление гиперссылки щелкните на кнопке 1 имеющимся файлом, Web-страницей, в поле Введите имя файла или Web-страницы введите адрес: http: //www. auto. ru, на

который будет выполняться переход при щелчке на данном тексте, и щелкните на кнопке ОК.

12.Оформите создаваемую web-страницу, используя тему. Для оформления документа с использованием темы выберите Формат > Тема. Выберите из списка тему, 9. Добавьте в раздел Биографические сведения текст Пишите мне и создайте на нем гиперссылку на адрес электронной почты Petrov@mail.ru. Для этого, выделив текст Пишите мне, в меню Вставка выберите команду Гиперссылка, в окне Добавление гиперссылки щелкните на кнопке 4 электронной почтой, в поле Электронная почта введите адрес Petrov@mai I. ru и щелкните на кнопке О К, как показано на рис. 5.5.

13.Проверьте орфографию документа, выбрав команду Сервис > Правописание.

14.Сохраните файл, выбрав Файл > Сохранить как, в окне Сохранение документа в.поле Имя файла задайте имя, например Home_Pagel, в поле Тип файла выберите Web-страница и щелкните на кнопке Сохранить.

Закройте окно Microsoft Word.

Рис. 5.5. Добавление гиперссылки на адрес электронной почты

16.Запустите web-обозреватель Microsoft Internet Explorer и

проверьте вид созданного web-документа, для чего выберите в меню Файл web-обозревателя команду Открыть. В окне Открыть щелкните на кнопке Обзор, затем выберите диск, папку, файл web-документа и щелкните на кнопке Открыть. Подтвердите открытие web-документа в окне Internet Explorer, щелкнув на кнопке ОК.

17.Просмотрите вид созданного документа в окне Microsoft Internet Explorer, проверьте действие гиперссылок для перехода к различным разделам документа и на сайт http://www.auto.ru в Интернете.

18. Выбрав в меню Вид команду В виде HTML, откройте данный документ в формате HTML в окне редактора Блокнот и просмотрите, как выглядит созданный web-документ на языке HTML.

Найдите в тексте и изучите теги:

<tit1е>Личная меЬ-страница</titlе> <hl> Пример моей персональной wеЬ-страницы</М> <h2><a пате=«_Моя_работа»></а>Моя работа</h2> <а href=«http://www.auto.гu/>»автомобили</а> <а href=<<#_top»>>Boзвpaт в начало</а>

ПРИМЕЧАНИЕ Тема — набор унифицированных элементов и цветовых схем, предназначенный для создания фоновых рисунков, маркеров, шрифтов, горизонтальных линий и других элементов документа. Когда к документу применяется какая-либо тема, автоматически настраиваются следующие элементы документа: цвет фона или фоновый рисунок, стили основного текста и заголовка, маркеры, горизонтальные линии, цвета гиперссылок, а также цвет границы таблицы.

Попробуйте объяснить назначение тегов: <title>, <h1>, <а href-.. .>. 19. Закройте окна редактора Блокнот и web-обозревателя Internet Explorer.

Лабораторная работа 5.2

Создание простой web-страницы с помощью

FrontPage Express

Запустите программу FrontPage Express одним из стандартных способов. Изучите элементы окна FrontPage Express. Для получения подсказки о назначении инструментов на панели управления воспользуйтесь всплывающей подсказкой, как показано на рис. 5.6.

Рис. 5.6. Окно FrontPage Express

2.Просмотрите и измените свойства создаваемой страницы, для чего выберите команду Файл > Свойства страницы. В окне Свойства страницы перейдите на вкладку Общие, в полях Кодировка HTML выберите кодировку Кириллица для отображения и сохранения документа, как показано на рис. 5.7. Завершите изменение свойств страницы, щелкнув на кнопке ОК.

3.Создайте элемент текст, для чего, установив курсор в окне

документа, введите нужный текст, допустим, Пример web-страницы, созданной в редакторе FrontPage Express. Выделив введенный текст, присвойте ему стиль Заголовок 3, выравнивание по центру.

4.Вставьте в создаваемый web-документ таблицу, в которой перечислите основные элементы web-страницы. Для вставки таблицы укажите место в окне документа, затем, щелкнув на кнопке Вставить таблицу на панели инструментов Стандартная, укажите мышью число строк — 2 и число столбцов — 3.

5.Вставьте в первый столбец таблицы текст из справки FrontPage Express о возможностях редактора, для чего вызовите справку, перейдите на вкладку Содержание и выберите тему Вас приветствует Microsoft FrontPage Express. Выделив нужный текст, запомните его в буфере обмена

(Ctrl+C), затем закройте окно справки и вставьте текст справки из буфера обмена в таблицу (Ctrl+V).

Вставьте во второй столбец рисунок, для чего, указав место вставки рисунка выберите Вставка > Изображение, перейдите на вкладку Другое место и установите флажок Из файла. Щелкните на кнопке Обзор и в открывшемся диалоговом окне Изображение укажите нужную папку и файл изображения. Щелкнув на кнопке Открыть, завершите вставку рисунка. Выделив рисунок и используя маркеры изменения размера рамки, измените его размеры.

Рис. 5.7. Определение кодировки символов на webстранице

7. Для вставки таблицы в третий столбец существующей таблицы установите курсор в первую строку третьего столбца и выберите в меню Таблица команду Вставить таблицу. В диалоговом окне Добавить таблицу задайте количество строк, колонок, определите в области Раскладка параметры раскладки: выравнивание, размер рамки, заполнение ячеек, промежуток между столбцами. Щелкните на кнопке ОК.

Введите в ячейки новой таблицы текст, например Текст в 1-й строке

и1-м столбце, затем установите размер и начертание символов текста.

8.Вставьте над первой строкой таблицы еще одну, для чего, выделив первую строку таблицы, выберите в меню Таблицы команду Вставить строки или столбцы в диалоговом окне укажите число строк 1, установите флажок Над выделенным и щелкните на кнопке ОК.

Введите в ячейки вставленной строки текст заголовков Пример текста, Пример рисунка, Пример таблицы.

9.Вставьте над первой строкой таблицы еще одну строку, введите в

нее текст Элементы web-страницы. Выделив все ячейки вставленной строки, выберите в меню Таблицы команду Объединить ячейки.

10.Создайте элемент гиперссыл ка, для чего, выделив фрагмент текста в первом столбце, в меню Вставка выберите команду Гиперссылка и перейдите на вкладку WWW. В раскрывшемся диалоговом окне укажите адрес web-страницы в Интернете, например http://www.infoart.ru. Щелкните на кнопке ОК.

11.В нижней части создаваемой web-страницы введите текст Дата последнего обновления страницы: и вставьте после текста компонент WebBot, позволяющий помещать метки времени. Для этого выберите в меню Вставка команду Компонент WebBot. В диалоговом окне Вставить компонент WebBot выберите компонент Отметка времени и щелкните на кнопке ОК. В диалоговом окне Свойства компонента WebBot «Отметка времени» определите свойства компонента, например, установите флажок Отображать дату последнего изменения страницы, выберите формат даты и щелкните на кнопке ОК.

Примечание. Компоненты WebBot — динамические объекты на web-странице, которые запускаются в то время, когда разработчик сохраняет страницу на web-сервере или когда пользователь просматривает страницу. В комплект FrontPage Express включены компоненты WebBot позволяющие помещать метки времени, а также средства вставки и поиска на страницы Web. Более полный набор подобных компонентов содержит Microsoft FrontPage.

12.Задайте свойства web-страницы, для чего выберите в меню Файл команду Свойства страницы. Выбрав в диалоговом окне Свойства страницы вкладку Общие, введите в поле Заголовок текст заголовка страницы Пример web-страницы, созданной в редакторе FrontPage Express,

вполе Кодировка HTML выберите кодировку Кириллица для отображения и сохранения web-страницы.

Перейдите на вкладку Фон, выберите фон светло-серый и щелкните на кнопке ОК. Если вы хотите использовать в качестве фона рисунок, то на вкладке Фон установите флажок Фоновое изображение и, щелкнув на кнопке Обзор, откройте диалоговое окно Выделите фоновое изображение. Щелкните на кнопке Обзор, найдите папку и файл рисунка и, щелкнув на кнопке Открыть, завершите выбор рисунка для фона.

Щелкнув на кнопке ОК в диалоговом окне Свойства страницы, завершите определение параметров web-страницы.

13.Сохраните созданный документ на диске, для чего выберите в меню Файл команду Сохранить как, в диалоговом окне задайте название страницы и, щелкнув на кнопке Как файл, укажите папку и имя файла. Щелкнув на кнопке Сохранить, завершите сохранение web-страницы как файла.

Рис. 5.8. Web-страница, созданная в редакторе FrontPage Express

14.Закройте окно FrontPage Express. Для просмотра созданной webстраницы загрузите Internet Explorer и, выбрав команду Файл > Работать автономно, установите режим автономной работы. Выбрав в меню Файл команду Открыть, щелкните на кнопке Обзор, выберите папку и файл созданной web-страницы и щелкните на кнопке Открыть. Закройте окно Открыть, щелкнув на кнопке ОК. Созданная web-страница будет иметь вид, показанный на рис. 5.8.

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

15.Выбрав в меню Вид команду В виде HTML, откройте данный документ в формате HTML в окне редактора Блокнот и просмотрите, как выглядит созданный web-документ на языке HTML.

Найдите в тексте и изучите теги, описывающие таблицу на webстранице.

16.После просмотра web-страницы закройте окно Internet Explorer. Примечание. В редакторе FrontPage Express предоставляются дополнительные возможности создания web-страниц, если вы выберете в меню Файл команду Создать, а далее выберете мастера. Значительно больше возможностей предоставляет редактор Microsoft FrontPage, переход к которому не потребует от вас освоения нового метода создания страниц

Web, так как FrontPage Express — это сокращенная версия FrontPage.

Изучая текст web-документа в HTML-формате, вы, наверное, были поражены большим объемом дополнительного текста, который сгенерировал и записал в web-документ редактор Microsoft Word. Значительно более оптимизированным выглядел бы текст данной webстраницы, если бы она создавалась в среде Microsoft FrontPage — специализированного средства для создания web-документов с удобным интерфейсом, который позволяет значительно упростить процесс разработки web-страниц и использовать при этом все возможности языка

HTML. В Microsoft FrontPage редактирование web-страницы осуществляется в режиме WYSIWYG (What You Se,e is What You Get —

что видите, то и получаете).

Рассмотрим примеры использования программы Microsoft FrontPage 2002 из пакета Microsoft Office ХР (ХР означает experience — «опыт») для создания web-документов.

5.2. Microsoft FrontPage: запуск и элементы интерфейса

Для запуска редактора FrontPage выберите в Главном меню

Windows команду Программы > Microsoft FrontPage.

Рис. 5.9. Окно Microsoft FrontPage 2002 с заготовкой web-узла

Раскроется окно приложения Microsoft Front Page (рис. 5.9), в котором, помимо меню, панели стандартных инструментов и панели инструментов форматирования, знакомым нам по Microsoft Word, имеются:

-панель Виды (Views), расположенная в левой части окна, содержит значки для-отображения различных представлений web-узла;

-панель Список папок (Folder List), расположенная в центре, отображает дерево файлов и папок, составляющих физическую структуру web-узла;

-окно для работы с выбранным представлением, расположенное

справа.

На панели Виды (Views) находятся значки следующих видов:

-Страница (Page) — встроенный редактор web-страниц;

-Папки (Folders) — иерархическая структура каталогов и файлов;

-Отчеты (Reports) — отчеты для анализа web-узла;

-Навигация (Navigation) — навигатор по страницам web-узла;

-Гиперссылки (Hypelinks) — отображение ссылок, имеющихся на других страницах;

-Задачи (Tasks) — список текущих задач.

Встроенный редактор FrontPage позволяет работать с web-страницей

втрех режимах:

-Нормальный (Normal), предназначенный для

редактирования страницы в режиме WYSIWYG, то есть когда страница представлена так, как она будет выглядеть в Internet Explorer;

-HTML, позволяющий редактировать страницу в текстовом представлении;

-Просмотр (Preview), разрешающий просмотреть и протестировать страницу в том виде, в котором она будет представлена в web-обозревателе

Microsoft Internet Explorer.

Для переключения режимов редактора служат вкладки Нормальный, HTML, Просмотр (Normal, HTML, Preview) в нижней строке окна редактирования (строка видна при открытой в окне редактора webстранице).

Для получения подсказки об использовании FrontPage вызовите справку, нажав клавишу F1 или выбрав нужный вариант справки в меню Помощь (Help). Использование справочной системы FrontPage аналогично

Windows и другим приложениям Microsoft Office.

Для завершения работы программы FrontPage выберите в меню Файл (File) команду Выход (Exit) или щелкните на кнопке Закрыть окно в правом верхнем углу окна.

Лабораторная работа 5.3

Использование Microsoft FrontPage для создания web-узла с использованием шаблона. Редактирование структуры web-узла. Редактирование web-страницы

1.Запустите Microsoft FrontPage, для чего в Главном меню Windows выберите команду Программы > Microsoft FrontPage.

2.Для создания структуры web-узла выберите команду Фа и л > Новый > Страница или Web, в диалоговом окне Новая страница или Web выберите Пустой Web-узелWeb). В окне Шаблоны Web-сайтов (Web Site Templates) выберите шаблон, например Персональная страница (Personal Web), в поле Указать место нового сайта (Specify the location of the new web) введите имя диска и папки, в которой будут размещены папки и файлы создаваемого web-узла, например D:\home\mywebs. Щелкните на кнопке ОК.

В результате в левой половине окна откроется список содержимого web-узла Список папок (Folder List), в котором автоматически создаются

папки _private и images и несколько страниц HTML с базовым содержанием по выбранному шаблону (см. рис. 5.9).

Созданный узел сохраняется в новой папке, которая помещается на локальный диск или на сервер Web. Этот узел можно впоследствии открыть с помощью команды Файл > Открыть (File t Open Web...) или выбрав его из списка последних открытых узлов Файл > Недавно использованные файлы (File > Recent Files).

3. Рассмотрите предложенную шаблоном персональной страницы базовую структуру web-узла. Для отображения структуры web-узла щелкните на значке Навигация (Navigation) на панели Вид. В правой части окна появилась структура web-узла (рис. 5.10). Здесь можно контролировать правильность ссылок, автоматически изменять их при переименовании файла и многое другое.

Удалите страницу myfav3.htm из web-узла, для чего укажите на структуре web-узла данный элемент и, щелкнув на нем правой кнопкой мыши, раскройте контекстное меню и выберите команду Удаление (Delete) (см. рис. 5.10). В раскрывшемся окне удаления установите флажок Удалить эту страницу из сайта (Delete this page from the Web) и щелкните на кнопке Да (OK).

Рис. 5.10. Изменение структуры web-узла

Совет. Если в окне структуры отсутствует панель инструментов Навигация, ее можно отобразить, выбрав в меню