Учебник для 11 класса

ИНФОРМАТИКА

§ 15. Создание таблиц и списков на wеb-странице

С помощью программы KompoZer добавим к нашему сайту еще две страницы: «Мое расписание уроков» и «Мои учителя». Для создания расписания уроков будем использовать таблицу, а для списка учителей — маркированный список.

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

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

• выбрать пункт меню Таблица → Вставить → Таблица;
• выбрать вкладку Точная и задать количество строк и столбцов таблицы, ширину таблицы (либо в % от ширины окна, либо в пикселях), а также ширину рамки таблицы;
• выбрать вкладку Ячейка и задать тип выравнивая содержимого ячейки по горизонтали и вертикали, а также расстояние между ячейками и величину отступа от границы до содержимого ячейки.

Начнем создавать таблицу «Расписание уроков». В конечном варианте таблица должна будет выглядеть следующим образом:

Обратите внимание, что в таблице есть ячейки, которые разбиты на две части. В одной ячейке разбиение идет по горизонтали (ИЗО и Музыка) — это означает, что занятия по этому предмету проходят раз в две недели поочередно. В двух ячейках разбиение идет по вертикали (французский и английский языки), что означает деление класса на две группы и их параллельные занятия у разных преподавателей. Кроме того, первая строка и первый столбец таблицы выделены другим цветом.

Создание страницы начнем с определения глобальных настроек (см. предыдущий параграф) и задания заголовка страницы — «Мое расписание уроков».

Для начала создадим таблицу с простой структурой без деления ячеек, как уже было описано выше. Размер таблицы — 6 строк на 6 столбцов, ширина таблицы — 95% от ширины окна, ширина рамки — 1, выравнивание по горизонтали — влево, по вертикали — по верху, отступы — по 2 пикселя.

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

Рис. 2.14. Первоначальный вид таблицы

Изменение свойств таблицы

Если возникает необходимость изменить некоторые свойства уже существующей таблицы, то нужно:

• установить курсор в любую ячейку таблицы;
• выбрать пункт меню Таблица → Свойства таблицы;
• изменить нужные свойства всей таблицы (вкладка Таблица) или отдельных ячеек (вкладка Ячейки).

Изменим способ выравнивания нашей таблицы. Для этого выберем указанный выше пункт меню и с помощью вкладки Таблица изменим тип выравнивания таблицы на значение — по центру.

Выделение ячеек таблицы

Если необходимо изменить свойства не всей таблицы целиком, а ее отдельных ячеек (строк или столбцов), то сначала надо выделить нужные ячейки. Для выделения используются следующие способы:

1. выделить с помощью мыши первую ячейку диапазона, а затем при нажатой клавише Ctrl щелкать по остальным ячейкам диапазона;
2. выделить с помощью мыши первую ячейку диапазона, а затем при нажатой клавише Shift щелкнуть по последней ячейке диапазона (в том случае, если нужно выделить подряд идущие ячейки);
3. установить курсор в любое место таблицы и щелкнуть по нужной строке или столбцу в линейке настройки таблицы (см. рис. 2.15).

Рис. 2.15. Верхняя линейка настройки таблицы

Теперь рассмотрим вопрос о разбиении и объединении ячеек. Дело в том, что в HTML-редакторах нет возможности разбиения уже существующей ячейки. Есть только возможность объединения строк и столбцов. Рассмотрим пример. Пусть мы хотим создать таблицу с приведенной ниже структурой (рис. 2.16).

Рис. 2.16. Пример сложной таблицы

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

Объединение ячеек

Для объединения ячеек надо выполнить следующие действия:

• выделить ячейки;
• выбрать пункт меню Таблица → Объединить выбранные ячейки.

Преобразуем структуру нашей таблицы. Для этого нам придется добавить в нее еще два столбца и одну строку.

Добавление строк и столбцов

Для добавления строк и столбцов необходимо:

• установить курсор в строку или столбец, куда нужно осуществить вставку;
• выбрать пункт меню Таблица → Вставить, а далее один из четырех пунктов: Строку сверху, Строку снизу, Столбец до или Столбец после.

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

1. объединим третий и четвертый столбцы во всех строках, кроме четвертой;
2. объединим шестой и седьмой столбцы во всех строках, кроме третьей;
3. объединим строки с номерами 5 и 6 во всех столбцах, кроме четвертого.

Изменение цвета фона ячеек

Для изменения цвета фона ячеек необходимо:

=> выделить ячейки;

=> выбрать пункт меню Таблица → Цвет фона ячейки или таблицы;

=> выбрать из палитры нужный цвет.

Изменим в нашей таблице цвет первой строки и первого столбца на цвет #993300 (коричневый).

Далее необходимо заполнить таблицу данными (шрифт — Verdana, размер — medium). Для первой строки и первого столбца используйте белый цвет шрифта. При наборе текста ширина ячеек будет изменяться. Не обращайте на это внимание.

Изменение ширины столбцов

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

1. Использовать специальную шкалу, которая находится под панелью вкладок.
2. С помощью пункта меню Таблица → Свойства таблицы, вкладки Ячейки. При использовании этого способа нужно выделить столбец, ширину которого необходимо изменить, установить флажок Ширина, указать размер столбца и установить флажок Разбивка текста на строки. Если последний флажок не будет установлен, то ширина столбца будет автоматически определяться по самой длинной строке и ее изменение вручную будет невозможно.

Подберите для каждого столбца таблицы «Мое расписание уроков» оптимальную ширину, чтобы в итоге таблица приобрела вид, как на рис. 2.17.

Рис. 2.17. Итоговый вид таблицы «Мое расписание уроков»

Сохраните полученную таблицу в файле rasp.html.

Создание списков

Для создания списков необходимо выполнить следующие действия:

• ввести с клавиатуры элементы списка;
• выделить элементы списка;
• выбрать пункт меню Формат → Список;
• выбрать тип списка — Маркированный или Нумерованный. Изменение формата списка

Для изменения формата уже существующего списка необходимо:

=> выделить элементы списка;

=> выбрать пункт меню Формат, Список, Свойства списка.

Система основных понятий

Вопросы и задания

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

3. Изучите самостоятельно, какие типы маркированных списков можно создать в программе KompoZer, и перечислите их.
4. Создайте для сайта «Домашняя страница Пети Иванова» страницу «Мои учителя» с использованием маркированного списка. В качестве маркера используйте квадрат. Заполните ее следующей информацией:

   Создание таблиц и списков на web-страницe

   • Орлова Любовь Евгеньевна — русский язык и литература;
   • Шахова Елена Петровна — алгебра и геометрия;
   • Любимов Вячеслав Сергеевич — физика и информатика;
   • Горелова Ирина Федоровна — английский язык;
   • Филиппова Ольга Александровна — французский язык;
   • Большаков Андрей Сергеевич — ОБЖ и технология;
   • Леонова Татьяна Дмитриевна — история и обществознание. Сохраните страницу в файле teacher.html.
5. Добавьте на главную страницу сайта ссылки на страницы «Мое расписание уроков» и «Мои учителя». Проверьте их работоспособность.