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

### (часть 3)

### Цель:

### - продолжение изучения создания сайтов в программе FrontPage

### - уметь создавать и работать с таблицами

### - уметь работать с гиперссылками

###

План:

1. Вставка гиперссылок

2. Просмотр веб-страниц по выбору посетителей

3. Удаление сайта

4. Создание списка

5. Создание таблицы

6. Ввод и редактирование информации в таблице

7. Редактирование структуры таблицы

8. Форматирование таблицы

9. Создание таблицы внутри таблицы

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

В этом упражнении вы создадите гиперссылки из страницы Новости сайта GardenCo на важные пресс-релизы, которые хранятся во внешнем документе Word.

GardenCo, PR1.doc

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

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

1. Откройте сайт GardenCo, находящийся в этой рабочей папке.
2. Откройте файл news.htm в режиме просмотра страниц и нажмите клавиши (Ctrl)+(End), чтобы переместить точку ввода в конец документа.
3. Нажмите клавишу (Enter), чтобы перейти на новую строку. Введите Архив публикаций в прессе и нажмите клавишу (Enter).
4. В меню Вставка (Insert) выберите пункт Гиперссылка (Hyperlink).
5. Щелкните на кнопке Папка (Browse for File), перейдите в папку Office XP SBS\FrontPage\Chap18\InsertHype, выберите файл PR1.doc и затем щелкните на кнопке OK, чтобы выделить этот файл, после чего еще раз щелкните на кнопке OK. Гиперссылка на данный пресс-релиз будет вставлена в точке ввода, как это показано ниже (см. Рисунок 1).

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

6. Чтобы увидеть содержимое ссылочного файла из FrontPage, нажмите клавишу (Ctrl) и щелкните на данной гиперссылке. Пресс-релиз, датированный 23 сентября 1998 г., откроется в программе Word.
7. Закройте пресс-релиз, чтобы вернуться в ваш сайт.
8. Сохраните и закройте открытый файл.
9. В меню Файл (File) выберите пункт Закрыть веб-узел (Close Web), чтобы закрыть текущий сайт.

### Просмотр веб-страниц по выбору посетителей

Мы начали достаточно активно настраивать сайт компании "Все для сада", и вам, конечно, хочется увидеть результаты своей работы. Имеется два способа просмотра сайта, созданного в программе FrontPage, до его публикации: в программе FrontPage или в каком-либо браузере. Предварительный просмотр сайта внутри FrontPage - это хороший способ увидеть его компоновку и оценить представление сервера в целом, но это не всегда позволяет отобразить сайт в том виде, как его увидит посетитель. Не говоря уже о том, что вы, возможно, увидите на странице не все, что предназначено для просмотра посетителями, ни одно из расширенных средств управления, добавление которых вам может потребоваться позже, не будет действовать при этом способе просмотра. Чтобы увидеть в точности то, что содержит ваш сайт, вам потребуется его предварительный просмотр в каком-либо браузере. Просмотр сайта в браузере - это прекрасный способ проверки удобства его использования и функционирования, прежде чем он окажется под пристальным вниманием реальной аудитории. У вас всегда должно быть найтись время для тестирования вашего сайта перед его публикацией.

В этом упражнении вы просмотрите сайт GardenCo в панели просмотра и затем просмотрите его в браузере.

GardenCo

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

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

1. Откройте сайт GardenCo, находящийся в этой рабочей папке.
2. Откройте главную страницу в режиме просмотра страниц .
3. Щелкните на кнопке просмотра внизу экрана, чтобы перейти в панель просмотра. Веб-страница будет представлена в окне FrontPage, как это показано ниже (см. Рисунок 2).

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

4. Щелкните на гиперссылке навигации в левой части, чтобы перейти на страницу Новости.
5. Щелкните на гиперссылке Главная (Home) вверху страницы, чтобы вернуться на домашнюю страницу.

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

6. Щелкните на кнопке Просмотр в обозревателе (Preview in Browser).
7. Появится диалоговое окно выбора обозревателя. Выберите браузер и размер окна, затем щелкните на кнопке Просмотр (Preview).

Домашняя страница GardenCo откроется в используемом по умолчанию браузере при выбранном размере окна (см. Рисунок 3).

Рисунок 3 – Окно браузера

8. Выполните обход сайта, как это сделал бы посетитель, щелкая на различных гиперссылках, чтобы убедиться в их функционировании.
9. Закройте браузер и вернитесь в программу FrontPage.

Разрешение проблем. Вы не можете редактировать файл в программе FrontPage во время предварительного просмотра файла в браузере. Попытка сделать это вызовет ошибку, которая называется нарушением прав доступа (access violation). Нужно закрыть браузер и затем внести необходимые изменения в ваш сайт в программе FrontPage.

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

### Удаление сайта

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

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

Важно. Если вы не создали эти сайты в первых двух упражнениях данной лекции, то, очевидно, не сможете удалить их в этом упражнении.

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

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

1. В меню Файл (File) щелкните на кнопке Открыть веб-узел (Open Web).
2. В диалоговом окне открытия веб-узла перейдите в папку C:\Office XP SBS\FrontPage\Chap18\OnePage и щелкните на кнопке Открыть (Open), чтобы открыть сайт.
3. Откройте панель списка папок, если она еще не открыта.
4. В списке папок щелкните правой кнопкой на папке верхнего уровня этого сайта, и затем в контекстном меню выберите пункт Удалить (Delete), чтобы открыть диалоговое окно Подтвердить удаление (Confirm Delete) (см. Рисунок 4).

Рисунок 4 – Окно Подтверждение удаления

5. Выберите вариант Полностью удалить веб-узел (Delete this Web entirely) и щелкните на кнопке OK, чтобы удалить сайт. Сайт будет удален и панель списка папок будет закрыта, поскольку представленное на экране содержимое уже не существует.
6. Повторите шаги 1-5 для удаления сайта Personal, созданного в начале этой лекции.
7. Если вы не переходите к следующей лекции, закройте программу FrontPage.

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

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

- С помощью кнопки Insert Table (Добавить таблицу).
- С помощью команды Insert Table (Добавить таблицу).
- Рисуя линии для создания строк и столбцов таблицы.

Вы будете работать с учебными файлами, которые хранятся в следующих подпапках папки Office XP SBS\FrontPage\Chap19: CreateList, CreateTable, TableText, TableStruct, FormatTable и TableInTable.

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

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

GardenCo

Для этого упражнения используется рабочая папка Office XP SBS\FrontPage\Chap19\CreateList. Выполните следующие шаги.

1. Если программа FrontPage еще не открыта, запустите ее.
2. Щелкните на стрелке кнопки Открыть (Open) и затем выберите в раскрывающемся списке пункт Открыть веб-узел (Open Web), чтобы появилось диалоговое окно Открытие веб-узла (Open Web) (см. Рисунок 5).

Рисунок 5 – Открытие веб-узла

3. Перейдите в рабочую папку, выделите GardenCo и щелкните на кнопке Открыть (Open). Сайт компании "Все для сада" откроется в режиме просмотра, который действовал при последнем выходе из FrontPage. Если вы находитесь в режиме просмотра страниц, рабочая область будет пустой, поскольку ни одна из страниц сайта еще не открыта.
4. Если панель списка папок еще не открыта, выберите пункт Список папок (Folder List) в меню Вид (View). Затем дважды щелкните на файле serv01.htm, чтобы открыть страницу Весенняя роскошь.
5. Выделите заголовок Основные преимущества и введите Что вы будете изучать, чтобы заменить текст заголовка.
6. Выделите и замените три строки маркированного списка следующими строками:

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

7. Щелкните на кнопке Закрыть (Close) файла serv01.htm, чтобы закрыть страницу Весенняя роскошь; когда появится запрос, сохраните ваши изменения.
8. В панели списка папок дважды щелкните на файле serv02.htm, чтобы открыть страницу Насекомоядные растения в окне просмотра и редактирования страниц.
9. Повторите шаги 5 и 6 на странице Насекомоядные растения, заменив строки маркированного списка следующими строками:

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

10. Щелкните на кнопке Закрыть (Close) файла serv02.htm, чтобы закрыть страницу Насекомоядные растения; когда появится запрос, сохраните ваши изменения.
11. В панели списка папок дважды щелкните на файле serv03.htm, чтобы открыть страницу Органика в окне просмотра и редактирования страниц.
12. Повторите шаги 5 и 6 на странице Органика, заменив строки маркированного списка следующими строками:

- С чего начать использовать отходы.
- Что НЕ класть в компостную кучу.
- Как понять, что компост готов к использованию.

13. Чтобы добавить новый маркированный элемент в список Органика, поместите точку ввода в конец третьей строки и нажмите клавишу (Enter). Будет создана новая (пустая) строка маркированного списка.
14. Введите для четвертой маркированной строки текст: Как использовать отходы наиболее эффективно. Этот маркированный список будет выглядеть как показано ниже (см. Рисунок 6).

Рисунок 6 – Просмотр маркированного списка

Преобразование набора абзацев в список

Как и в программе Word, для преобразования набора обычных абзацев в маркированный список выделите эти абзацы и щелкните на кнопке Маркеры (Bullets) в панели инструментов форматирования. Чтобы преобразовать элементы маркированного списка снова в обычные абзацы, выделите эти элементы и щелкните на кнопке Маркеры (Bullets), чтобы отключить ее. Аналогичным образом для преобразования набора обычных абзацев в нумерованный список выделите эти абзацы и щелкните на кнопке Номера (Numbering) в панели инструментов форматирования.

15. Щелкните на кнопке Закрыть (Close) файла serv03.htm, чтобы закрыть страницу Органика; когда появится запрос, сохраните ваши изменения.
16. В панели списка папок дважды щелкните на файле services.htm, чтобы открыть страницу Учебные курсы в окне просмотра и редактирования страниц.
17. Нажмите клавиши (Ctrl)+(End), чтобы переместить точку ввода вниз страницы.
18. Введите Как записаться и затем, удерживая клавишу (Shift), нажмите клавиши (Ctrl)+(Home), чтобы выделить этот текст.
19. В раскрывающемся списке Стиль (Style) щелкните на Заголовок 3 (Heading 3), чтобы отформатировать текст как заголовок третьего уровня.
20. Нажмите клавишу (End), чтобы переместить точку ввода в конец заголовка, и затем нажмите клавишу (Enter), чтобы начать новую строку. Введите Пришлите e-mail по адресу classes@gardenco.msn.com и укажите название курса и дату первого занятия.. При вводе адрес электронной почты будет автоматически сформатирован как гиперссылка.
21. Щелкните на кнопке Номера (Numbering) в панели инструментов форматирования, чтобы преобразовать абзац в нумерованный элемент, и затем нажмите клавишу (Enter), чтобы создать новую строку. FrontPage "предполагает", что следующий абзац тоже будет нумерованным элементом.
22. Введите Когда вам придет ответ, распечатайте его и принесите на первое занятие в указанный день..
23. Нажмите клавишу (Enter), чтобы создать новую строку, и затем щелкните на кнопке Numbering (Номера), чтобы отключить нумерацию и преобразовать новый нумерованный элемент в обычный абзац. Нумерованный список будет выглядеть как показано ниже (см. Рисунок 7).

Рисунок 7 – Просмотр нумерованного списка

Совет. Если вас это интересует, вы можете щелкнуть на кнопке HTML, чтобы вывести в панели HTML соответствующий исходный код для нумерованного списка. Как вы увидите, FrontPage обозначает весь список как упорядоченный список (ordered list), находящийся между тегами <ol> и </ol>. Каждый элемент этого списка находится между тегами <li> и </li>. Маркированный список имеет аналогичную структуру, за исключением того, что весь список обозначается как неупорядоченный список (unordered list), находящийся между тегами <ul> и </ul>.

24. Щелкните на кнопке Закрыть (Close) файла s1ervices.htm, чтобы закрыть страницу Учебные курсы; когда появится запрос, сохраните ваши изменения.
25. В меню Файл (File) выберите пункт Закрыть веб-узел (Close Web), чтобы закрыть текущий сайт.

### Создание таблицы

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

### Нет табулированных списков?

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

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

GardenCo

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

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

1. В меню Файл (File) выберите пункт Открыть веб-узел (Open Web).
2. В диалоговом окне Open Web перейдите к сайту GardenCo, который находится в указанной рабочей папке, и затем щелкните на кнопке Открыть (Open).
3. В панели списка папок дважды щелкните на файле serv01.htm, чтобы открыть страницу Весенняя роскошь в окне просмотра и редактирования страниц.
4. Щелкните на черной горизонтальной линейке примерно в середине страницы и затем нажмите клавишу (Home), чтобы поместить точку ввода в начало этой строки.
5. Введите Первое занятие групп. Затем, удерживая клавишу (Shift), нажмите клавишу (Home), чтобы выделить этот текст.
6. В раскрывающемся списке Стиль (Style) щелкните на Заголовок 3 (Heading 3), чтобы отформатировать текст как заголовок третьего уровня.
7. Нажмите клавишу (End), чтобы переместить точку ввода в конец заголовка, и затем нажмите клавишу (Enter), чтобы начать новую строку.
8. В стандартной панели инструментов щелкните на кнопке Добавить таблицу (Insert Table), чтобы появилась следующая сетка.

9. Укажите на первую ячейку (пересечение первой строки и первого столбца) и нажмите кнопку мыши. Не отпуская кнопку мыши, перетащите курсор, чтобы выделить участок шириной три ячейки и высотой десять ячеек (таблица будет расширяться при перетаскивании мыши к ее краю), и затем отпустите кнопку мыши. FrontPage вставит таблицу с выбранным вами количеством строк и столбцов, как показано ниже (см. Рисунок 8).

Рисунок 8 – Вставленная таблица во FrontPage

10. Щелкните на кнопке Закрыть (Close) файла serv01.htm, чтобы закрыть страницу Весенняя роскошь; когда появится запрос, сохраните ваши изменения.
11. В панели списка папок дважды щелкните на файле serv02.htm, чтобы открыть страницу Насекомоядные растения в окне просмотра и редактирования страниц.
12. Повторите шаги 4 -7, чтобы создать заголовок Первое занятие групп и пустую строку.

Преобразование существующего текста в таблицу

Если у вас имеется текстовый блок с элементами, которые разделены запятыми, символами табуляции или знаками абзаца, вы можете преобразовать этот текст в таблицу. Выделите текст, который хотите преобразовать, затем в меню Таблица (Table) укажите пункт Преобразовать (Convert) и выберите пункт Преобразовать в таблицу (Text to Table). Появится диалоговое окно преобразования текста в таблицу, где вы можете указать программе FrontPage, как разделены элементы выделенного текста. Выберите нужный разделитель и щелкните на кнопке OK. FrontPage преобразует текст в таблицу, и поскольку таблица выделена, появится панель инструментов таблиц, чтобы вы могли внести необходимые поправки.

Вы можете также преобразовать таблицу в текст. Выделите таблицу, в меню Таблица (Table) укажите пункт Преобразовать (Convert) и выберите пункт Преобразовать в текст (Table to Text). Затем в диалоговом окне преобразования таблицы в текст выберите символ, который хотите использовать для разделения элементов, и щелкните на кнопке OK.

13. В меню Таблица (Table) укажите пункт Вставить (Insert) и затем выберите пункт Таблица (Table), чтобы появилось следующее диалоговое окно (см. Рисунок 9) .

Рисунок 9 – Окно Вставка таблицы

В отличие от большинства соответствующих команд меню и кнопок панелей инструментов в приложениях Microsoft Office XP, команда вставки таблиц и кнопка Добавить таблицу (InsertTable) действуют по-разному. Команда выводит диалоговое окно, а кнопка выводит сетку.

14. В секции Размер (Size) укажите для своей таблицы 9 строк и 4 столбца.
15. В секции Положение (Layout) задайте в поле Толщина границы (Border size) значение 0 и в поле Поля ячеек (Cell padding) значение 3.

Совет. В поле Cell padding (Поля ячеек) задается интервал между границами ячейки и текстом внутри нее. Это аналогично полям страницы.

16. Убедитесь, что ширина равна 100 процентам, и щелкните на кнопке OK, чтобы создать эту таблицу (см. Рисунок 10).

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

17. Щелкните на кнопке Закрыть (Close) файла serv02.htm, чтобы закрыть страницу Насекомоядные растения; когда появится запрос, сохраните ваши изменения.
18. В панели списка папок дважды щелкните на файле serv03.htm, чтобы открыть страницу Органика в окне просмотра и редактирования страниц.
19. Повторите шаги 4 -7, чтобы создать заголовок Первое занятие групп и пустую строку.
20. В меню Таблица (Table) укажите пункт Нарисовать таблицу (Draw Table).

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

Если экран забит панелями инструментов

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

21. Щелкните в том месте, где хотите поместить верхний левый угол таблицы, и протяните курсор в форме карандаша в то место, где хотите поместить нижний правый угол. FrontPage создаст таблицу из одной ячейки.
22. Используя курсор в форме карандаша, нарисуйте линии, чтобы создать таблицу с тремя столбцами и десятью строками, как это показано ниже (см. Рисунок 11).

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

Совет. Поэкспериментируйте с линиями, разделяющими столбцы и строки: вы увидите, что таблица расширяется в соответствии с вашими требованиями.

23. Нажмите клавишу (Esc), чтобы курсор мыши принял прежнюю форму.
24. Щелкните на кнопке Закрыть (Close) файла serv03.htm, чтобы закрыть страницу Органика; когда появится запрос, сохраните ваши изменения.
25. В меню Файл (File) выберите пункт Закрыть ве6-узел (Close Web), чтобы закрыть данный сайт.

### Ввод и редактирование информации в таблице

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

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

GardenCo, ClassList.doc

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

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

1. В меню Файл (File) выберите пункт Открыть веб-узел (Open Web).
2. В диалоговом окне открытия веб-узла перейдите к сайту GardenCo, который находится в указанной рабочей папке, и затем щелкните на кнопке Открыть (Open).
3. В списке папок щелкните на файле serv01.htm, чтобы выделить его и, удерживая нажатой клавишу (Ctrl), щелкните на файлах serv02.htm и serv03.htm, чтобы были выделены все три файла.
4. Нажмите клавишу (Enter), чтобы открыть все три файла в окне просмотра и редактирования страниц.
5. На странице Весенняя роскошь введите в первой строке таблицы заголовки столбцов Название, Дата и Время, создав тем самым заголовочную строку.
6. Теперь введите следующую информацию в трех столбцах таблицы под соответствующими заголовками:

Название | Дата | Время
Весенняя роскошь | Вторник, 5 Августа | 18:00 - 21:0
Весенняя роскошь | Четверг, 4 Сентября | 18:00 - 21:0
Весенняя роскошь | Суббота, 4 Октября | 11:00 - 14:0
Насекомоядные растения | Понедельник, 11 Августа | 18:00 - 20:0
Насекомоядные растения | Среда, 10 Сентября | 18:00 - 20:0
Насекомоядные растения | Суббота, 11 Октября | 12:00 - 14:0
Органические отходы | Суббота, 16 Августа | 12:00 - 16:0
Органические отходы | Суббота, 13 Сентября | 12:00 - 16:0
Органические отходы | Суббота, 18 Октября | 12:00 - 16:0

7. Совет. Если вы не хотите набирать этот текст с клавиатуры, то можете скопировать и вставить эту информацию из файла ClassList.doc, находящегося в папке Office XP SBS\FrontPage\Chap19\TableText.
8. Щелкните на вкладке страницы serv03.htm, чтобы перейти к этому файлу.
9. На странице Органика введите в нарисованной от руки таблице ту же заголовочную строку и те же три столбца информации.
10. Щелкните на вкладке страницы serv02.htm, чтобы перейти к этому файлу.
11. На странице Насекомоядные растения не заполняйте заголовочную строку таблицы; заполните два первых столбца информацией о названии курса и дате, затем заполните четвертый столбец информацией о времени.
12. В меню Файл (File) выберите пункт Сохранить все (Save All), чтобы сохранить все открытые файлы.
13. В меню Файл (File) выберите пункт Закрыть веб-узел (Close Web), чтобы закрыть данный сайт.

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

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

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

GardenCo

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

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

1. Откройте сайт GardenCo, находящийся в указанной рабочей папке.
2. В панели списка папок дважды щелкните на файле serv02.htm, чтобы открыть страницу Насекомоядные растения в окне просмотра и редактирования страниц.
3. На странице Насекомоядные растения щелкните в любом месте четвертого столбца таблицы.
4. В меню Таблица (Table) укажите пункт Выделить (Select) и затем выберите пункт Столбец (Column).
5. Укажите на выделенную часть и перетащите информацию о времени из четвертого столбца в третий.
6. Щелкните в любом месте верхней строки таблицы.
7. В меню Таблица (Table) укажите пункт Вставить (Insert) и затем выберите пункт Строки или столбцы (Rows or Columns), чтобы появилось следующее диалоговое окно (см. Рисунок 12).

Рисунок 12 – Окно вставки строк и столбцов

8. В секции Положение (Location) выберите вариант Над выделенным (Above Selection) и щелкните на кнопке OK. FrontPage вставит новую строку вверху таблицы.
9. Теперь щелкните в любом месте четвертого столбца таблицы.
10. В меню Таблица (Table) укажите пункт Выделить (Select) и затем выберите пункт Столбец (Column).
11. Щелкните правой кнопкой на выделенной части и выберите в контекстном меню пункт Удалить ячейки (Delete Cells), чтобы удалить пустой столбец с правой стороны таблицы.
12. В новой заголовочной строке введите те же заголовки столбцов, что и для двух других таблиц: Название, Дата и Время. Таблица на странице Насекомоядные растения теперь будет выглядеть так же, как и таблицы на страницах Весенняя роскошь и Органика.
13. Щелкните на кнопке Закрыть (Close) файла serv02.htm, чтобы закрыть страницу Насекомоядные растения; когда появится запрос, сохраните ваши изменения.
14. В панели списка папок дважды щелкните на файле serv03.htm, чтобы открыть страницу Органика в окне просмотра и редактирования страниц.
15. Чтобы изменить размер столбцов в таблице на этой странице, укажите сначала правую границу столбца Дата. Курсор изменит свою форму на двустороннюю стрелку.
16. Дважды щелкните на этой границе. FrontPage изменит размер этот столбца, чтобы все его записи уместились в одну строку.
17. Теперь щелкните в любом месте таблицы и в меню Таблица (Table) выберите пункт Автоподбор по содержимому (AutoFit to Contents). Все столбцы будут выровнены в точности по ширине своего содержимого, как это показано ниже (см. Рисунок 13).

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

18. Щелкните правой кнопкой в любом месте таблицы и выберите в контекстном меню пункт Свойства таблицы (Table Properties), чтобы появилось диалоговое окно свойств таблицы (см. Рисунок 14).

Рисунок 14 – Окно Свойства таблицы

19. В диалоговом окне свойств таблицы выполните следующее:

- В раскрывающемся списке Выравнивание (Alignment) выберите вариант По левому краю (Left).
- Выберите в поле Поля ячеек (Cell padding) значение 3.
- В поле Задать ширину (Specify width) введите значение 100 и затем выберите вариант В процентах (In percent).
- В секции Границы (Borders) задайте в поле Размер (Size) значение 0.
- Щелкните на кнопке OK, чтобы закрыть это диалоговое окно и применить изменения.

20. Теперь переместите курсор вверх первого столбца, чтобы курсор имел форму направленной вниз стрелки. Удерживайте кнопку мыши, чтобы выделить этот столбец, и затем протяните его вправо, чтобы выделить все три столбца.
21. В меню Таблица (Table) выберите пункт Выровнять ширину столбцов (Distribute Columns Evenly), чтобы все столбцы имели одинаковую ширину.
22. Щелкните на кнопке Закрыть (Close) файла serv03.htm, чтобы закрыть страницу Органика; когда появится запрос, сохраните ваши изменения.
23. В меню Файл (File) выберите пункт Закрыть веб-узел (Close Web), чтобы закрыть данный сайт.

### Форматирование таблицы

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

FrontPage 2002 теперь поддерживает дополнительные средства Office для форматирования таблиц:

- Заполнить вправо (Fill right) и Заполнить вниз (Fill down) позволяют быстро копировать содержимое из одной ячейки таблицы в несколько других.
- Автоформат (Auto Format) позволяет быстро и легко создавать профессионально скомпонованные таблицы посредством простого выбора из списка заранее подготовленных вариантов форматирования.
- Кнопка Внешние границы (Border drop-down tool) позволяет форматировать границы таблиц и ячеек столь же просто, как и в Word или Excel, используя щелчок на выбранной части.

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

GardenCo

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

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

1. Откройте сайт GardenCo, находящийся в указанной рабочей папке.
2. В панели cписка папок дважды щелкните на файле serv02.htm, чтобы открыть страницу Насекомоядные растения в окне просмотра и редактирования страниц.
3. Выполните прокрутку вниз к данной таблице и выделите три ячейки заголовочной строки.
4. Щелкните правой кнопкой на выделенной части и выберите в контекстном меню пункт Свойства ячейки (Cell Properties), чтобы появилось следующее диалоговое окно (см. Рисунок 15).

Рисунок 15 – Окно Свойства ячейки

5. В диалоговом окне свойств ячейки установите флажок Ячейка заголовка (Header cell).
6. В секции Фон (Background) щелкните на стрелке поля Цвет (Color), чтобы появились цветовые палитры Стандартные (Standard) и Цвета темы (Theme). По умолчанию в выбранные цвета включаются 16 стандартных цветов из веб-палитры, а также цвета, которые используются в данный момент в текущем открытом документе.

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

Если щелкнуть на кнопке Другие цвета (More Colors), то появится диалоговое окно, где можно выбирать из палитры, содержащей 127 цветов, или задавать собственный цвет, используя шестнадцатеричное значение или значение в режиме RGB. Возможности выбора практически не ограничены! (см. Рисунок 16)

Рисунок 16 – Окно Другие цвета

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

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

8. В панели списка папок дважды щелкните на файле serv01.htm, чтобы открыть страницу Весенняя роскошь в окне просмотра и редактирования страниц.
9. Щелкните в любом месте этой таблицы.
10. В меню Таблица (Table) выберите пункт Автоформат (Table AutoFormat).
11. В диалоговом окне автоформата прокрутите список форматов, щелкая по очереди на каждом формате.

При выборе очередного формата пример таблицы появляется в окне Просмотр (Preview), как показано ниже (см. Рисунок 18).

Рисунок 18 – Окно Автоформат таблицы

12. Выберите формат Утонченный 1.
13. Поскольку эта таблица не содержит специального первого столбца, то в секции Изменить оформление (Apply special formats) сбросьте флажок первого столбца (First Column).
14. Щелкните на кнопке OK, чтобы применить выбранный формат к данной таблице.
15. Щелкните на кнопке Просмотр (Preview) в окне просмотра и редактирования страниц, чтобы перейти в панель просмотра.

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

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

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

16. Щелкните на кнопке Обычный (Normal) внизу окна просмотра и редактирования страниц, чтобы перейти в панель обычного просмотра.
17. В первом столбце выделите три ячейки, содержащие слова Весенняя роскошь, и в меню Таблица (Table) выберите пункт Объединить ячейки (Merge Cells).

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

18. Выделите и удалите два экземпляра, оставив только один.
19. Повторите шаги 17 и 18 для курсов Насекомоядные растения и Органика. Таблица будет выглядеть как показано ниже.

Совет. Чтобы разбить одну ячейку на несколько ячеек, щелкните правой кнопкой на этой ячейке и выберите в контекстном меню пункт Разбить ячейки (Split Cells). В диалоговом окне укажите число строк или столбцов, на которые хотите разбить ячейку, и щелкните на кнопке OK (см. Рисунок 20).

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

20. В меню Файл (File) выберите пункт Сохранить все (Save All), чтобы сохранить все открытые файлы.
21. В меню Файл (File) выберите пункт Закрыть веб-узел (Close Web), чтобы закрыть данный сайт.

###
Создание таблицы внутри таблицы

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

GardenCo

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

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

1. Откройте сайт GardenCo, находящийся в указанной рабочей папке.
2. В панели списка папок дважды щелкните на файле serv02.htm, чтобы открыть страницу Насекомоядные растения в окне просмотра и редактирования страниц.
3. Выполните прокрутку вниз к данной таблице и щелкните на первой строке, содержащей слова Насекомоядные растения.
4. В меню Таблица (Table) выберите пункт Разбить таблицу (Split Table). FrontPage разобьет таблицу на две таблицы.
5. Щелкните на первой строке, содержащей слова Органика, и снова разбейте таблицу. Теперь у вас три отдельные таблицы.
6. Щелкните на строке, содержащей слова Название, Дата и Время.
7. В меню Таблица (Table) укажите пункт Выделить (Select) и затем выберите пункт Строка (Row).
8. Щелкните правой кнопкой на выделенной части и выберите в контекстном меню пункт Удалить ячейки (Delete Cells).
9. Щелкните в любом месте таблицы Весенняя роскошь, укажите в меню Таблица (Table) пункт Вставить (Insert) и затем выберите пункт Надпись (Caption). Центрированная строка надписи будет добавлена вверху таблицы.
10. Введите название таблицы: Планируем осенью весеннюю роскошь.
11. Выделите эту надпись и сделайте ее полужирной .
12. Выделите первый столбец. Щелкните правой кнопкой на выделенной части и выберите в контекстном меню пункт Удалить ячейки (Delete Cells), чтобы удалить этот столбец.
13. Щелкните в любом месте таблицы и выберите в меню Таблица (Table) пункт Автоподбор по содержимому (AutoFit to Contents).
14. Повторите шаги 9 -13 для таблиц Насекомоядные растения и Органика, используя следующие заголовки как надписи таблиц.

- Насекомоядные растения: опасные или прекрасные?
- Органика: используйте отходы!

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

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

15. Щелкните на кнопке Закрыть (Close) файла serv02.htm, чтобы закрыть страницу Насекомоядные растения; когда появится запрос, сохраните ваши изменения.
16. В меню Файл (File) выберите пункт Закрыть веб-узел (Close Web), чтобы закрыть данный сайт.
17. Если вы не переходите к следующей лекции, закройте программу FrontPage.