Глава 4. Лабораторная работа "Создание таблиц в web-редакторе"

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

1. Запустите редактор HTML-страниц: выберите Пуск | Программы | HomeSite4.5 | Homesite4.5, выберите File | New, выберите вкладку HTML, выберите шаблон DefaultTemplate.

2. Введите заголовок страницы: после тэга <TITLE> введите свой текст, например, Прайс-лист компании ООО Холод

Для создания и редактирования атрибутов таблицы можно использовать:

3. Доступ к этим инструментам выполняется с помощью вкладки Tables панели быстрой вставки. Проверьте включена ли эта панель: выберите View, если флажок стоит напротив Quick Bar , то включена, если нет флажка - тогда включите - выбрав Quick Bar .

4. Создайте таблицу с помощью мастера: выберите мышью место расположения кода таблицы после тега <body> , на панели быстрой вставки Quick Bar выберите вкладку Tables, нажмите кнопку Table Wizard , на экране первое окно мастера - Table Design .

В исходном состоянии таблица содержит две строки и два столбца, то есть четыре ячейки равного размера. Можно изменять количество строк и столбцов, изменять размер ячеек, объединять ячейки:

5. С помощью кнопки Rows + сделайте количество строк в таблице равным 5.

6. С помощью кнопки Columns + сделайте количество столбцов в таблице 4.

7. С помощью ColumnSpan + объедините ячейки 1-ой строки

Итак, кто знает HTML, то понимает, что

8. Продолжите установку атрибутов таблице: выберите Next, на экране второе окно мастера - Table Properties (параметры таблицы).

Это окно содержит элементы управления, которые позволяют установить следующие атрибуты тэга <TABLE>:

9. Установите параметры таблицы: в списке Alignment выберите Center, в списке Cell Spacing выберите расстояние между ячейками и содержимым равное 4, в списке Cell Padding выберите расстояние между рамкой ячеек и содержимым равное 3, флажком выберите Specify Widht, в поле введите ширину таблицы 70% выберите Use Color , выберите цвет фона какой понравится, в списке Size выберите толщину рамки 4, в списке Frame выберите расположение внешней рамки All four sides , в списке Rules выберите рамку между строками и столбцами внутри таблицы between all rows and columns .

10. Продолжите установку атрибутов таблице: выберите Next, на экране третье окно мастера - Cell Properties (параметры ячейки).

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

11. Установите параметры первой строки таблицы, представляющей собой одну ячейку: выберите мышью первую строку, в поле Content введите заголовок своей таблицы, например, OOO Холод предлагает пельменные аппараты, выберите флажком Header, который является признаком, что содержимое данной ячейки должно отображаться как заголовок (тэг <TH>), в списке Horisontal выберите способ горизонтального выравнивания содержимого ячейки, например, center, в списке Vertical выберите способ вертикального выравнивания содержимого ячейки, например, middle.

12. Установите параметры второй строки таблицы, представляющей собой названия столбцов таблицы: выберите мышью первую ячейку, в поле Content введите Артикул, выберите флажком Header, в списке Horisontal выберите center, в списке Vertical выберите middle, выберите мышью вторую ячейку, в поле Content введите Название, выберите флажком Header, в списке Horisontal выберите center, в списке Vertical выберите middle, выберите мышью третью ячейку, в поле Content введите Цена, выберите флажком Header, в списке Horisontal выберите center, в списке Vertical выберите middle, выберите мышью четвертую ячейку, в поле Content введите Buy Now , выберите флажком Header, в списке Horisontal выберите center, в списке Vertical выберите middle.

13. Остальное ручками. Нажмите Finish. Перед вами HTML-код сгенерированный мастером.

14. Итак, наши данные: 101 это артикул товара, Пельменный аппарат НПА-1М - название, 3500 - цена. Введите в HTML-код данные о своих товарах, например,

<tr>

<td>101</td>

<td>Пельменный аппарат НПА-1М</td>

<td>3500</td>

<td></td>

</tr>

15. Сохраните страницу: выберите File | Save as, в поле File name введите pricelist, в списке File of type выберите HTMLdocuments (*.htm), в поле Look in выберите свою личную папку, нажмите Save.

16. Просмотрите страницу в редакторе: в окне Homesite выберите вкладку Browse, на экране должна быть ваша таблица, выберите вкладку Edit.

17. Введите остальные данные о товарах в HTML-код - см. 14.

18. В редакторе можно редактировать и без глубокого знания языка HTML: выберите мышью после тега <body, нажмите МП, выберите Edit Tag, выберите HTML 4.0, в списке Background Color выберите какой понравится цвет фона, нажмите ОК, выберите File | Save, нажмите вкладку Browse, фон страницы должен измениться, выберите вкладку Edit.