### Лабораторная работа по теме «Создание сайта с помощью HTML»

### (часть 2)

Цель:

- познакомиться с шаблонами сайтов

- изучить средства создания списков с помощью Microsoft FrontPage

- уметь форматировать текст на веб-страницах

###

План:

1. Создание нового сайта с помощью шаблона

2. Создание нового сайта с помощью мастера

3. Розничная продажа в режиме "он-лайн"

4. Работа со списком задач

5. Вставка и редактирование комментариев

6. Вставка и редактирование текста

7. Вставка существующего текста

8. Форматирование текста

9. Каскадные таблицы стилей

Самый простой способ создания нового сайта - это использование одного из шаблонов FrontPage. Шаблоны позволяют создать макет определенного типа веб- страницы или сайта, обозначая с помощью заполнителей тип содержимого, которое вы должны поместить в определенных местах сайта. Вам остается только заменить эти заполнители реальным содержимым, после чего вы получаете готовую страницу или сайт. Для создания сайта с помощью шаблона нужно просто выбрать этот шаблон и указать место, где должен быть создан сайт. FrontPage создаст затем новый сайт и применит к нему структуру шаблона, оставив вам заполнение содержимого и настройку внешнего вида сайта в соответствии с вашими требованиями. В этом упражнении вы создадите с помощью шаблонов два различных типа сайтов: простой одностраничный сайт и личный сайт. Выполните следующие шаги:

1. Если программа FrontPage еще не открыта, запустите ее.
2. Если область задач Создание веб-страницы или узла (New Page or Web) не открыта, укажите в меню Файл (File) пункт Создать (New) и затем выберите пункт Страница или веб-узел (Page or Web).

Ваш экран будет выглядеть как это показано на следующей странице (см. Рисунок 1).

Рисунок 1 - Область задач Создание веб-страницы или узла

Область задач Создание веб-страницы или узла (New Page or Web) содержит удобные гиперссылки на сайты и отдельные страницы, которые вы создали или с которыми работаете в программе FrontPage. Она также содержит ссылки на шаблоны и мастера, которые можно использовать для создания новых веб-страниц или сайтов. Если эта панель задач еще не открыта, вы можете открыть ее, используя один из следующих трех методов:

- В меню Файл (File) укажите пункт Создать (New) и затем выберите пункт Страница или веб-узел (Page or Web).
- В меню Вид (View) выберите пункт Область задач (Task Pane). Если появится другая панель задач, щелкните на направленной вниз стрелке на правом краю заголовка панели задач и щелкните в раскрывающемся списке на пункте Создание веб-страницы или узла (New Page or Web).
- Щелкните правой кнопкой на панели задач и выберите в контекстном меню пункт Область задач (Task Pane). Щелкните в раскрывающемся списке панели задач на пункте Создание веб-страницы или узла (New Page or Web).

Чтобы открывать эту панель задач при каждом запуске FrontPage:

- В меню Сервис (Tools) выберите пункт Параметры (Options) и затем установите флажок открывать область задач (Startup Task Pane).

2. В секции Создание с помощью шаблона (New from template) панели задач создания веб-страницы или узла выберите пункт Шаблоны веб-узлов (Web Site Templates). В результате появится диалоговое окно с шаблонами веб- узлов (см. Рисунок 2).

Рисунок 2 - Диалоговое окно с шаблонами веб- узлов

4. В диалоговом окне шаблонов веб-узлов щелкните на значке Одностраничный веб-узел (One Page Web).
5. В секции Параметры (Options) укажите, как вы хотите назвать свой сайт и где вы хотите хранить его. В данном случае введите C:\Office XP SBS\FrontPage\Chap18\OnePage в поле Укажите расположение новго веб-узла (Specify the location of new Web), чтобы создать дисковый сайт в рабочей папке данного упражнения.
6. Щелкните на кнопке OK. За несколько секунд вы создали новый одностраничный сайт.

Совет. Если вы установили учебные файлы не на диске C, замените обозначение диска другой буквой в указанном выше пути доступа.

7. Если панель Список папок (Folder List) еще не открыта, выберите пункт Список папок (Folder List) в меню Вид (View), чтобы открыть ее.
8. В списке папок дважды щелкните на файле index.htm, чтобы открыть этот файл. Ваш экран должен выглядеть, как это показано ниже (см. Рисунок 3).

Рисунок 3 – Рабочая область FrontPage

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

В окне FrontPage показано, что ваш одностраничный сайт якобы состоит из одного файла с именем index.htm и двух пустых папок с именами _private и images. Но из представления этого сайта в окне Windows Explorer видно, что эта единственная страница поддерживается многими файлами и папками (некоторые из них являются скрытыми [hidden]) (см. Рисунок 4).

Рисунок 4 - Рабочая область FrontPage

Если отобразить index.htm в режиме просмотра страницы, эта страница окажется совершенно пустой: как "холст", на котором вы можете создать настоящее произведение искусства. Закончив изучение этого курса, вы будете обладать достаточными знаниями, чтобы создать довольно сложную страницу с самого начала, но пока, чтобы начать работу, стоит придерживаться того, что вам предоставляет FrontPage. Теперь вы опробуете еще один шаблон, создав личный сайт на основе новых знаний.

9. Щелкните на направленной вниз стрелке справа от кнопки Создание новой обычной страницы (Create a new normal page) и затем выберите пункт Веб-узел (Web).

Появится диалоговое окно с шаблонами сайтов.

10. В диалоговом окне шаблонов сайтов щелкните на значке Личный веб-узел (Personal Web), введите местоположение - C:\Office XP SBS\FrontPage\Chap18\Personal и щелкните на кнопке OK.

Совет. FrontPage предлагает местоположение вашего нового сайта, исходя из местоположения последнего созданного вами сайта.

Появится второе окно FrontPage, и в этом окне FrontPage создаст личный сайт. Тем самым на вашем компьютере будут одновременно работать два экземпляра этой программы.

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

Рисунок 5 – Домашняя страница сайта

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

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

12. В меню Файл (File) выберите пункт Закрыть веб-узел (Close Web), чтобы закрыть этот личный сайт.
13. Щелкните на кнопке Закрыть (Close), чтобы закрыть второй экземпляр FrontPage и вернуться к первому экземпляру.
14. В меню Файл (File) выберите пункт Закрыть веб-узел (Close Web), чтобы закрыть одностраничный сайт.

### Создание нового сайта с помощью мастера

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

В этом упражнении вы создадите корпоративный сайт (сайт компании) для вымышленной компании по продаже садового инвентаря и растений, которая называется "Все для сада". Компания "Все для сада" имеет небольшой магазин в Сиэтле, шт. Вашингтон. Владельцем компании является Catherine Turner (Кэтрин Тернер), которая хотела бы обмениваться информацией с покупателями и расширять покупательскую базу через Интернет. Если поддержка сайта отвечает этим скромным целям, она, возможно, расширит в будущем средства этого сайта, чтобы можно было вести розничную продажу в режиме "он- лайн". Для создания этого простого корпоративного сайта (сайта компании) вы будете использовать Мастера корпоративного веб-узла (Соrporate Presence Wizard).

### Розничная продажа в режиме "он-лайн"

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

Для этого упражнения не используется никакой рабочей папки.

Выполните следующие шаги.

1. Щелкните на направленной вниз стрелке справа от кнопки Создать (New) и выберите пункт Веб-узел (Web). Появится диалоговое окно Шаблоны веб-узлов (Web Site Templates).
2. В диалоговом окне с шаблонами щелкните на значке Мастер корпоративного веб-узла (Corporate Presence Wizard), задайте местоположение и имя вашего сайта как C:\Office XP SBS\FrontPage \Chap18\GardenCo и щелкните на кнопке OK. Появится первое из серии диалоговых окон мастера корпоративного веб- узла, которые называются страницами. Мастер выводит эти страницы, чтобы вы могли сделать выбор в ответ на его запросы и ввести базовую информацию о компании.
3. Прочитайте информацию на первой странице и затем щелкните на кнопке Далее (Next), чтобы перейти ко второй странице.
4. Продолжите чтение информации и щелкайте на кнопке Далее (Next), чтобы принять заданные по умолчанию варианты на каждой странице мастера корпоративного веб-узла, пока не дойдете до страницы, где запрашивается имя и адрес компании.
5. Введите указанную здесь информацию (или вашу собственную информацию) и затем щелкните на кнопке Далее (Next) (см. Рисунок 6).

Рисунок 6 – Мастер создания корпоратиного веб-узла

6. Введите показанную здесь контактную информацию компании (или вашу собственную информацию) и щелкните на кнопке Далее (Next) (см. Рисунок 7).

Рисунок 7 - Мастер создания корпоратиного веб-узла

Обобщенные адреса электронной почты

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

7. Большинство сайтов, создаваемых мастерами, содержат принятую по умолчанию тему графического оформления, что придает всем веб-страницам единообразный вид. Вы можете изменить принятую по умолчанию тему, но мы не будем делать это сейчас, поэтому щелкните на кнопке Далее (Next) и затем щелкните на кнопке Готово (Finish). FrontPage создаст ваш сайт, используя заданную вами информацию, и затем выведет на экран следующий список задач, которые нужно выполнить, чтобы завершить создание этого сайта (см. Рисунок 8).

Совет. Если вы уже создавали сайты в программе FrontPage, это программа "знает" о вас по информации, сохраненной в вашем профиле пользователя, и поэтому назначит эти задачи вам (колонка Сопоставлена (Assigned To)). Если это первый случай, когда вы создаете сайт, то FrontPage назначит эти задачи пользователю Nobody.

8. В меню Файл (File) выберите пункт Закрыть веб-узел (Close Web), чтобы закрыть текущий сайт.

Рисунок 8 - Рабочая область FrontPage

### Работа со списком задач

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

GardenCo

Для этого упражнения используется рабочая папка Office XP SBS\FrontPage\Chap18\TasksList.

Выполните следующие шаги.

1. В меню Файл (File) выберите пункт Открыть веб-узел (Open Web).
2. Перейдите к сайту GardenCo, который находится в указанной рабочей папке, и щелкните на кнопке Открыть (Open), чтобы открыть данный сайт.
3. Если вы не находитесь в режиме отображения задач, щелкните на значке Задачи (Tasks) на панели представлений.
4. Дважды щелкните на первой задаче с высоким приоритетом Настроить домашнюю страницу (Customize Home Page), чтобы открыть диалоговое окно Сведения о задаче (Task Details), как показано ниже (см. Рисунок 9).

Рисунок 9 – Окно сведений о задаче

5. В поле Исполнитель (Assigned to) дважды щелкните или протяните мышью, чтобы выделить текущее значение. Назначьте задачу самому себе: введите свое имя, пользовательское имя или инициалы и затем щелкните на кнопке Запустить (Start Task).

Домашняя страница (index.htm) откроется в режиме просмотра страниц, и вы сможете заменить комментарии, введенные мастером корпоративных веб-узлов, на ваш собственный текст.

6. Вам не нужно редактировать эту страницу сейчас, поэтому выберите пункт Закрыть веб-узел (Close Web) в меню Файл (File), чтобы закрыть текущий сайт.

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

Для вставки комментария выберите пункт Примечания (Comment) в меню Вставка (Insert). Затем введите свои замечания в текстовом поле и щелкните на кнопке OK.

Для редактирования комментария дважды щелкните в любом месте текстового блока комментария, после чего появится окно редактирования. Внесите свои изменения и щелкните на кнопке OK. Для удаления комментария щелкните на нем один раз, чтобы выделить его, и затем нажмите клавишу (Del).

### Вставка и редактирование текста

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

GardenCo

Для этого упражнения используется рабочая папка Office XP SBS\FrontPage\Chap18\InsertText.

Выполните следующие шаги.

1. В стандартной панели инструментов щелкните на стрелке кнопки Открыть (Open) и затем щелкните в раскрывающемся списке на пункте Открыть веб-узел (Open Web).
2. В диалоговом окне Открытие веб-узла (Open Web) перейдите к сайту GardenCo, который находится в рабочей папке, и щелкните на кнопке Открыть (Open), чтобы открыть данный сайт в программе FrontPage.
3. В панели Список папок (Folder List) дважды щелкните на index.htm, чтобы открыть домашнюю страницу в окне просмотра и редактирования страниц, затем щелкните на кнопке Закрыть (Close), чтобы закрыть список папок и увеличить рабочую область экрана.
4. В теле домашней страницы щелкните на вводном примечании и нажмите клавишу (End), чтобы поместить точку ввода в конец абзаца.
5. Введите следующий текст: Добро пожаловать в компанию "Все для сада"! Мы занимаемся садовыми работами на северо-западе Тихоокеанского побережья. На этом сайте представлены наша продукция и услуги. Если вы заглянули к нам на сайт или в магазин, ощутите всю свободу выбора и дайте нам знать, если вам нужна наша помощь!
6. Поместите точку ввода в конец комментария под заголовком "Наши задачи" и затем введите следующий текст:

В компании "Все для сада", мы предлагаем только высококачественные растения и садовый инвентарь для своих покупателей.

7. После комментария под заголовком "Контактная информация" введите следующий текст:

Пожалуйста, связывайтесь с нами по факсу или e-mail 24 часа в сутки, или звоните, а также приходите в наш магазин в следующее время: Понедельник - Пятница 9:00 - 21:00, Суббота и Воскресенье 10:00 - 17:00.

Ваш экран будет выглядеть как показано ниже (см. Рисунок 10).

Рисунок 10 – Рабочая область FrontPage

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

Вы можете в любой момент изменить введенный вами текст или добавить новый текст.

8. Поместите точку ввода в конец абзаца под заголовком "Наши задачи".
9. Нажмите клавишу (Enter), чтобы создать новый абзац, и затем введите следующий текст:

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

10. Теперь вам нужно поместить значок электронной почты рядом с заголовком Электронная почта (Electronic mail) в секции "Контактная информация" данной страницы. Поместите точку ввода слева от буквы "E" в "Electronic mail".
11. В меню Вставка (Insert) выберите пункт Символ (Symbol), чтобы вызвать диалоговое окно Символ (Symbol).
12. В раскрывающемся списке Шрифт (Font) выберите вариант Webdings.
13. Выполните прокрутку, пока не увидите три почтовых значка, и щелкните на первом из них, как это показано ниже (см. Рисунок 11).

Рисунок 11 – Окно вставки символа

14. Щелкните на кнопке Вставка (Insert) и затем щелкните на кнопке Закрыть (Close). В панели Обычный вид (Normal) ваша контактная информация будет выглядеть как показано ниже (см. Рисунок 12).

Рисунок 12 – Рабочая область FrontPage

Это явно не тот значок почты, который вы только что ввели!

15. Щелкните на кнопке Просмотр (Preview) внизу окна просмотра и редактирования страниц, чтобы перейти к панели просмотра. Теперь данный символ будет представлен в том виде, как его увидят посетители (см. Рисунок 13).

Рисунок 13 – Окно просмотра

16. В стандартной панели инструментов щелкните на кнопке Сохранить (Save), чтобы сохранить вашу веб-страницу.
17. В панели представлений щелкните на значке Задачи (Tasks), чтобы перейти в режим просмотра задач.
18. Щелкните правой кнопкой на первой задаче и выберите из контекстного меню пункт Пометить как завершенную (Mark Complete), чтобы эта задача была отмечена как выполненная.
19. В меню Файл (File) выберите пункт Закрыть веб-узел (Close Web), чтобы закрыть текущий сайт.

### Вставка существующего текста

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

Вы можете даже выполнять вставку целых файлов.

Вы можете копировать или вырезать различные фрагменты содержимого из файлов в различных программах Microsoft Office и затем вставлять их в ваши веб-страницы. Область задач Буфер обмен Office (Office Clipboard) может содержать тексты, графику и другие элементы файлов в удобном и доступном виде и может включать в себя до 24 различных элементов из всех приложений Office.

При каждой вставке содержимого буфера обмена в файл программы FrontPage появляется плавающая кнопка Параметры вставки (Paste Options), с помощью которой вы можете выбирать между применением целевых стилей, сохранением исходного форматирования или сохранением при вставке только текста. По умолчанию сохраняется исходное форматирование. Вы можете игнорировать кнопку параметров вставки, если не хотите выбирать что-то отличное от исходного форматирования.

Чтобы кнопка параметров вставки не появлялась на экране, выберите пункт Параметры страницы (Options) в меню Сервис (Tools) и сбросьте флажок Показать кнопки параметров вставки (Show Paste Options button).

В этом упражнении вы вставите текст из внешних файлов в две существующие веб- страницы сайта GardenCo: "Новости" и "Услуги". Вторая задача в порядке приоритета для этого сайта - это добавление текста по связям с общественностью к странице новостей. Текст этой страницы на данный момент содержит заголовок "Изменения на сайте" и текст с обсуждением обновлений сайта. Поскольку вы решаете, что обновления сайта не представляют интереса для постоянных покупателей компании "Все для сада", вы измените эту страницу и будете включать в нее пресс-релизы. Вы также обновите страницу "Услуги", используя текст из документа Microsoft Word. Затем вы обновите заголовок каждой страницы, чтобы отразить новое содержание.

GardenCo, PR2.doc, Classes.doc

Для этого упражнения используется рабочая папка Office XP SBS\FrontPage\Chap18\InsertExist.

Выполните следующие шаги.

1. Откройте сайт GardenCo, находящийся в этой рабочей папке.
2. Перейдите в режим просмотра задач.

Важно. Вы можете отображать на экране выполненные ранее задачи, щелкнув правой кнопкой на фоновой части списка задач и щелкнув затем в контекстном меню на пункте Показать журнал (Show History).

3. Дважды щелкните на задаче Customize News Page (Настроить страницу News), чтобы открыть ее. Назначьте эту задачу самому себе, и затем щелкните на кнопке Запустить задачу (Start Task), чтобы открыть файл news.htm.
4. Дважды щелкните на заголовке "Изменения на сайте", чтобы выделить его, и введите Публикации в прессе. Текст заголовка изменится, но формат останется прежним.
5. Замените заданный по умолчанию текст вводного абзаца следующим текстом:

Ознакомьтесь с новостями! Прочтите здесь то, что пишут о нас в газетах.

6. Выделите комментарий под абзацем, который вы только что ввели.
7. В меню Вставка (Insert) выберите пункт Файл (File), чтобы открыть диалоговое окно Вставка файла (Insert File).
8. Перейдите в папку Office XP SBS\FrontPage\Chap18\InsertExist.
9. В раскрывающемся списке Тип файлов (Files of type) выберите вариант Word 97-2002 (*.doc).
10. Выберите из списка имеющихся файлов PR2.doc и затем щелкните на кнопке Открыть (Open), чтобы вставить весь текст этого документа на вашу веб-страницу.

Текст этого документа будет преобразован в формат RTF и затем в HTML, после чего произойдет его вставка на странице "Новости", как если бы вы ввели его вручную. Исходное форматирование текста сохраняется.

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

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

11. Щелкните на таблице. В меню Таблица (Table) укажите пункт Выделить (Select) и затем выберите пункт Таблица (Table). Будет выделена таблица и ее содержимое.
12. Щелкните правой кнопкой на этой выделенной части и выберите в контекстном меню пункт Удалить (Delete), чтобы удалить эту таблицу.
13. Трижды щелкните на заголовке Публикации в прессе, чтобы выделить весь абзац, и затем нажмите клавишу (Del), чтобы удалить его из веб- страницы.
14. Щелкните на кнопке Сохранить (Save), чтобы сохранить вашу веб- страницу. FrontPage попросит вас обновить список задач.
15. Щелкните на кнопке Да (Yes) и затем щелкните на кнопке Закрыть (Close) в верхнем правом углу рабочей области, чтобы закрыть файл этой страницы.
16. В панели представлений щелкните на значке Задачи (Tasks), чтобы открыть режим просмотра задач. Задачи Настроить домашнюю страницу и Настроить страницу новостей теперь будут показаны как выполненные.
17. Далее вы добавите текст на странице Услуги. Назначьте задачу Настроить страницу услуг самому себе и запустите эту задачу. Появится страница Услуги.

18. Теперь нужно настроить объявление на этой странице. Щелкните правой кнопкой на объявлении страницы Услуги и выберите из контекстного меню пункт свойств объявления (см. Рисунок 14).

Рисунок 14 – Страница Услуги

Появится диалоговое окно Свойства объявления на странице (Page Banner Properties).

19. В поле Текст объявления (Page banner) выделите и удалите текущий текст и затем введите Учебные курсы, как это показано ниже.

Рисунок 15 – Окно Свойства объявления на странице

20. Щелкните на кнопке OK, чтобы закрыть это диалоговое окно и изменить заголовок страницы. Это изменение повлияет на заголовок страницы как в объявлении страницы, так и в режим просмотра.
21. В окне Windows Explorer перейдите в папку Office XP SBS\FrontPage\Chap18\InsertExist и дважды щелкните на файле classes.doc, чтобы открыть его в программе Word.
22. Трижды щелкните в любом месте вводного абзаца, чтобы выделить его, и нажмите клавиши (Ctrl)+(C), чтобы скопировать текст в буфер обмена Office.
23. На странице services.htm щелкните на тексте примечания, чтобы выделить его, и затем нажмите клавиши (Ctrl)+(V), чтобы скопировать текст из буфера обмена. Скопированный текст заменит текст комментария.
24. Выделите и удалите лишний (пустой) абзац, вставленный вместе с этим текстом.
25. В панели списка папок откройте serv01.htm, serv02.htm и serv03.htm (три файла отдельных услуг) для редактирования.
26. В каждом файле повторите шаги 17 и 18, чтобы заменить заголовки страниц на следующие краткие варианты, описанные в документе Учебные курсы:

- Измените Service 1 (Услуга 1) на Весенняя радость.
- Измените Service 2 (Услуга 2) на Насекомоядные растения.
- Измените Service 3 (Услуга 3) на Органика.

Отметим, что по мере обновления баннеров страниц одновременно изменяются навигационные гиперссылки под баннерами страниц и заголовки страниц в режиме просмотра.

27. Вернитесь к файлу services.htm и обратите внимание, что вертикальные гиперссылки навигации вдоль левого края также изменились, отражая новые заголовки страниц.
28. Для каждой из трех гиперссылок Услуга дважды щелкните на гиперссылке, чтобы выделить ее, и введите полное имя соответствующего курса из документа Учебные курсы.

- Замените Name of service 1 (Имя услуги 1) на Планируем осенью весеннюю роскошь.
- Замените Name of service 2 (Имя услуги 2) на Насекомоядные растения: вредные или прекрасные?
- Замените Name of service 3 (Имя услуги 1) на Органические отходы: используйте их, чтобы от них избавиться!

Для гиперссылок лучше ввести ссылку заново, чтобы она оставалась активной, чем выполнять ее копирование и вставку.

29. Теперь скопируйте и вставьте первый описательный абзац для каждого курса из документа Учебные курсы на страницу services.htm, заменяя описание соответствующей услуги. По окончании ваши страницы будут выглядеть приблизительно так.

Рисунок 15 – Рабочие страницы

На каждой из трех страниц описания отдельных курсов (serv01.htm, serv02.htm и serv03.htm) щелкните в любом месте тела страницы, нажмите клавиши (Ctrl)+(A), чтобы выделить все содержимое, и затем нажмите клавишу (Del).

30. В документе Учебные курсы выделите и скопируйте в буфер обмена описательный текст, цели обучения и расписание курсов для каждого курса, а затем выполните вставку содержимого буфера обмена на соответствующих страницах.
31. В меню Файл (File) выберите пункт Сохранить все (Save All), чтобы сохранить все изменения, и пометьте задачу как выполненную, когда получите соответствующий запрос.
32. В меню Файл (File) выберите пункт Закрыть веб-узел (Close Web), чтобы закрыть данный сайт.

###
Форматирование текста

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

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

GardenCo

Для этого упражнения используется рабочая папка Office XP SBS\FrontPage\Chap18\FormatText.

Выполните следующие шаги.

1. Откройте сайт GardenCo, который находится в этой рабочей папке.
2. Откройте файл index.htm (домашняя страница) в окне просмотра и редактирования страниц.
3. Выделите и удалите три блока комментариев, чтобы сделать страницу более удобной для чтения.
4. В первом абзаце выделите имя компании.
5. В панели инструментов Форматирование щелкните на кнопке Увеличить размер шрифта (Increase Font Size). Отметим, что размер шрифта, показанный в раскрывающемся списке Размер шрифта (Font Size), изменится с 3 (12 pt) на 4 (14 pt).
6. Выделите последнее предложение в первом абзаце (начинается с "Если вы заглянули:") и щелкните на кнопке Курсив (Italic), чтобы получить курсивное начертание текста.
7. Щелкните на кнопке просмотра внизу окна просмотра и редактирования страниц, чтобы перейти в панель просмотра, и найдите значок электронной почты в секции Контактная информация. Отметим, что при текущем размере этот значок плохо различим.
8. Вернитесь к панели Обычный и выделите значок почты.
9. В панели инструментов форматирования щелкните на стрелке справа от поля Размер шрифта (Font Size) и выберите в раскрывающемся списке размер 6 (24 pt), чтобы увеличить размер значка почты.

Совет. Размеры шрифтов выражаются в программе FrontPage двумя способами: в пунктах [pt] (как в других приложениях, таких как Word и Microsoft Excel) и в единицах от 1 до 7. В раскрывающем списке размеров шрифта содержатся восемь вариантов: обычный, 1 (8 pt), 2 (10 pt), 3 (12 pt), 4 (14 pt), 5 (18 pt), 6 (24 pt) и 7 (36 pt).

10. Для аккуратности вставьте пробел между этим значком и смежным текстом и затем перейдите в панель просмотра, чтобы увидеть результаты этого изменения (см. Рисунок 16).

Рисунок 16 – Рабочая область FrontPage

Откройте файл services.htm (страница Учебные курсы) в режиме просмотра страниц. Отметим, что текст на этой странице представлен шрифтом, отличающимся от шрифта по умолчанию, используемого на домашней странице.

11. Выделите первый абзац.
12. Щелкните на стрелке справа от поля Шрифт (Font) и выберите в раскрывающемся списке шрифт Arial. Отметим, что размер шрифта все еще отличается от размера шрифта на домашней странице.
13. Продoлжая работать с выделенным первым абзацем, нажмите клавиши (Ctrl) + (Spacebar), чтобы восстановить исходное форматирование страницы. Повторите этот шаг для каждого из трех абзацев с описанием курсов.
14. Для каждого абзаца поместите точку ввода в конец абзаца и нажмите клавишу (Enter), чтобы вставить признак конца строки.
15. Во вводном абзаце выделите слова географических районах.
16. В панели инструментов Форматирование щелкните на стрелке кнопки Цвет шрифта (Font Color) и измените цвет шрифта на cиний. Повторите эту процедуру, чтобы заменить цвет слов общему и сезонному уходу на зеленый и дополнительных мероприятий на красный. Ваша страница будет выглядеть как показано ниже (см. Рисунок 17).

Рисунок 17 – Рабочая страница

17. Откройте файл serv01.htm (страница "Весенняя радость") в окне просмотра и редактирования страниц. Отметим, что шрифт на этой странице отличается от используемого по умолчанию шрифта на домашней странице.
18. Нажмите клавиши (Ctrl)+(A), чтобы выделить все содержимое страницы. В раскрывающемся списке шрифтов выберите шрифт по умолчанию. Шрифт всех элементов данной страницы изменится на используемый по умолчанию шрифт.
19. Выделите абзац, где приводятся сведения об учебных курсах.
20. В панели инструментов Форматирование щелкните на стрелке кнопки Границы (Borders), чтобы появилась панель инструментов границ. Эту панель инструментов можно отсоединять и закреплять где угодно или перемещать независимо.
21. Выберите вариант Внешние границы (Outside Borders), чтобы применить его к данному абзацу.
22. Продолжая работать с выделенным абзацем, выберите пункт Абзац (Paragraph) в меню Формат (Format).
23. В диалоговом окне Абзац (Paragraph) выполните следующее:

1. В раскрывающемся списке Выравнивание (Alignment) выберите вариант По центру (Center).
2. В секции Отступ (Indentation) введите в полях Перед текстом (Before text) и После текста (After text) значение 15.
3. В секции Интервал (Spacing) введите в полях Перед (Before) и После (After) значение 0.

Диалоговое окно будет выглядеть как показано ниже (см. Рисунок 18).

Рисунок 18 – Диалоговое окно Абзац

24. Щелкните на кнопке OK, чтобы применить параметры форматирования абзаца. Ваша страница будет выглядеть, как это показано ниже (см. Рисунок 19).

Рисунок 19 – Ваша рабочая страница

25. Повторите шаги 18-25, чтобы переформатировать serv02.htm (страница Насекомоядные растения) и serv03.htm (страница Органика).
26. В меню Файл (File) выберите пункт Сохранить все (Save All), чтобы сохранить все открытые файлы.
27. Щелкните на пункте Закрыть веб-узел (Close Web) в меню Файл (File), чтобы закрыть данный сайт.

### Каскадные таблицы стилей

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

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

Чтобы создать встроенную каскадную таблицу стилей в программе FrontPage, выберите пункт Стиль (Style) в меню Format (Формат) и затем определите свои собственные стили. Ваши определения сохраняются в HTML-коде данной страницы.

Чтобы создать внешнюю каскадную таблицу стилей в программе FrontPage, выберите тип CSS среди вариантов, которые имеются во вкладке Style Sheets (Таблицы стилей) диалогового окна Шаблоны страниц (Page Templates), щелкните на кнопке OK, чтобы создать CSS-файл, и затем определите свои стили в этом файле.

Чтобы присоединить таблицу стилей в программе FrontPage, выберите пункт Связи с таблицами стилей (Style Sheet Links) в меню Формат (Format) и перейдите к CSS-файлу на вашем компьютере или (если вы подсоединены к Internet) в сети.

В качестве альтернативного варианта вы можете выбрать вариант Применить с помощью CSS (Apply using CSS) в диалоговом окне Тема: (Themes), когда применяете какую-либо тему к вашей странице или сайту.