Добавил:
ivanov666
Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз:
Предмет:
Файл:Web-технологии. Учебно-методический комплекс дисциплины по направлению подготовки 51.03.06 (071900) «Библиотечно-информационная деятельность», профиль
.pdf
но и являются широко используемым инструментом дизайна, представляя
собой каркас, определяющий место каждого графического и текстового
фрагмента на web-странице.
Таблицы в HTML определяются при помощи тега <TABLE>...
</TABLE>, заключающего в себе другие элементы таблицы (название,
заголовки ячеек и их содержимое).
Создание строки таблицы – тег <ТR>
Данные в таблице организованы построчно, каждая новая строка
таблицы задается тегом <TR>...</TR> (закрывающий тег </TR> можно не
использовать). Весь текст, другие теги и атрибуты, которые требуется
поместить в одну строку, должны размещаться между тегами <ТR></ТR>.
Создание столбца таблицы – тег <ТD>
Внутри строки таблицы обычно размещаются ячейки с данными.
Каждая ячейка, содержащая текст или изображение, должна быть окружена тегами <Т
D> </ТD>. Число тегов <ТD></ТD> в строке определяет чис-
ло ячеек (столбцов).
Создание заголовков таблицы – тег <САРТIОN>
Тег <CAPTION> позволяет создавать заголовки таблицы. По умолчанию заголовки центрируются и размещаются либо над (<САРТION
АLIGN="top">), либо под таблицей (<САРТION ALIGN="bottom">). Заголовок может состоять из любого текста и изображений. Текст будет
разбит
на строки, соответствующие ширине таблицы.
Создание заголовков столбцов таблицы – тег <ТН>
Заголовки для столбцов и строк таблицы задаются с помощью тега
заголовка <ТН></ТН> (Таblе Неаder, заголовок таблицы). Эти теги подобны <ТD></ТD>. Отличие состоит в том, что текст, заключенный между
тегами <ТН></ТН>, автоматически записывается жирным
шрифтом и по
умолчанию располагается посередине ячейки. Центрирование можно отменить и выровнять текст по левому или правому краю. Если воспользоваться <ТD></ТD> с тегом <В> и атрибутом <АLIGN="center">, текст тоже будет выглядеть как заголовок. Однако следует иметь в виду, что не все
браузеры поддерживают в таблицах жирный шрифт
, поэтому лучше зада-
вать заголовки таблиц с помощью <ТН>.
51
Для форматирования элементов таблиц в тегах <TABLE>,<TH> и
<TD> используется много различных атрибутов. Рассмотрим их более
подробно.
Таблица 1 – Атрибуты тегов таблицы
Атрибут Теги Описание
Толщина рамки таблицы в пиксе-
BORDER="число" <TABLE>
<TABLE>
BORDERCOLOR="цвет"
<TD><TR>
<TH>
<TABLE>
<TD>
BGCOLOR="цвет"
<TR>
<TH>
<TABLE>
<TR>
ALIGN="выравнивание"
лях (по умолчанию рамки нет,
BORDER=0)
Цвет рамки таблицы, строки или
отдельно взятой ячейки
Цвет фона таблицы, строки или
отдельно взятой ячейки
Общее горизонтальное выравнивание таблицы на странице –
LEFT/RIGHT/ CENTER
Общее выравнивание элементов
строки
LEFT/RIGHT/CENTER/CHAR
Выравнивание заголовка –
VALIGN="выравнивание"
<TH>
<TD>
<TABLE>
<TR>
<TH>
52
LEFT/RIGHT/CENTER/CHAR
(по умолчанию CENTER)
Выравнивание данных в ячейке –
LEFT/RIGHT/CENTER/CHAR
(по умолчанию LEFT)
Общее вертикальное выравнивание элементов таблицы –
BOTTOM/ MIDDLE/TOP
(по умолчанию MIDDLE)
Общее выравнивание элементов
строки – BOTTOM/MIDDLE/
TOP/BASELINE
Выравнивание заголовка –
BOTTOM/MIDDLE/TOP
Атрибут Теги Описание
<TD>
<TABLE>
WIDTH="ширина"
<TH>
<TD>
HEIGHT="ширина" <TABLE>
CELLPADDING="число" <TABLE>
CELLSPACING="число" <TABLE>
Выравнивание данных в ячейке –
BOTTOM/MIDDLE/TOP
Ширина таблицы в пикселях
или процентах от ширины окна
браузера
Ширина ячейки таблицы в пикселях или процентах от ширины
таблицы
Высота таблицы в пикселях
или процентах от ширины окна
браузера
Свободное пространство между
содержимым ячеек и их границами
Свободное пространство между
границами смежных ячеек
BACKGROUND="рисунок" <TABLE>
Вывод указанного рисунка в качестве фона таблицы
Размер свободного пространства
HSPACE="число" <TABLE>
слева и справа от таблицы в пикселях
Размер свободного пространства
VSPACE="число" <TABLE>
сверху и снизу от таблицы в пикселях
Работа с таблицами в Microsoft FrontPage 2003
Для вставки таблицы на web-страницу необходимо установить курсор
в нужное место, а затем воспользоваться одним из способов ее создания.
1) Создание таблицы с помощью команды Добавить таблицу
(рис. 1) на Стандартной панели инструментов. В этом случае необходи-
мо выбрать данную команду, в результате появится сетка таблицы.
Параметры
полученной таблицы будут установлены по умолчанию.
53
2) Создание таблицы с помощью
команды Нарисовать таблицу (рис. 2).
Данная команда доступна из меню Таб-
лица или с панели инструментов Таблицы. После выполнения этой команды
указатель мыши примет форму карандаша. Далее нажатой левой кнопкой
мыши рисуется общая прямоугольная
форма таблицы, а затем рисуются линии столбцов и строк.
Рисунок 1 – Создание таблицы с по-
мощью команды Добавить таблицу
Рисунок 2 – Создание таблицы с помощью команды Нарисовать таблицу
3) Создание таблицы с помощью команды Таблица – Вставить –
Таблица. В результате выполнения этой команды открывается диалоговое
окно Вставка таблицы (рис. 3), в котором можно установить различные
опции настройки таблицы.
Рассмотрим некоторые из них.
В разделе Размер в полях Строк и Столбцов задается количество
строк и столбцов таблицы.
Таблица – Вставить – Таблица
54
Раздел Положение позволяет задать следующие опции:
Выравнивание – задается выравнивание таблицы относительно
web-страницы;
Обтекание – задается возможность обтекания таблицы другими
объектами;
Поля ячеек – задается отступ от границ ячеек до их содержимого;
Интервал ячеек – определяет отступы между ячейками.
Рисунок 3 – Создание таблицы с помощью команды Таблица –
Вставить – Таблица
55
Опция Задать ширину позволяет задать ширину таблицы тремя способами: первый – ширина не задана (ширина таблицы определяется шириной ячеек с содержимым наибольшей ширины); второй – ширина задана
в точках (ширина таблицы задается в пикселях и не меняется при изменении размеров окна браузера, в том случае, если ширина таблицы больше
размеров окна браузера, появляется горизонтальная полоса прокрутки);
третий – в процентах (ширина таблицы определяется как процент от доступного пространства, под которым понимается либо размер окна обозревателя, либо размер ячейки, в которую вложена таблица). Аналогично устанавливается опция Задать высоту.
Раздел Границы устанавливает размер и цветовое оформление рамки таблицы
.
Раздел Фон позволяет установить фон таблицы либо как однотонный
(вкладка Цвет), либо с использованием графического файла (кнопка
Обзор). Если заданы оба варианта фона, то приоритет имеет графический
фон и только в том случае, если в настройках браузера отменен показ
рисунков, будет виден однотонный фон.
Раздел По умолчанию позволяет запомнить заданные
опции для но-
вых таблиц.
Для форматирования свойств уже созданной таблицы используются
диалоговые окна Свойства таблицы, Свойства ячейки, которые можно
открыть, установив курсор в любом месте таблицы (ячейки) и выполнив
соответствующую команду или войдя в контекстное меню Свойства таб-
лицы (Свойства ячейки).
Диалоговое окно Свойства таблицы полностью сов-
падает
с диалоговым окном
Вставка таблицы.
Диалоговое окно Свойства ячейки (рис. 4) позволяет
установить следующие опции.
Выровнять по горизон-
тали, Выровнять по вертикали – определяют выравни-
вание содержимого ячейки.
Объединение строк,
Объединение столбцов – оп-
ределяют число объединенных
строк, столбцов.
Рисунок 4 – Диалоговое окно Свойства ячейки
56
Задать ширину, Задать высоту – устанавливают размеры ячейки
аналогично размерам таблицы.
Ячейка заголовка – включение флажка преобразует ячейку в ячейку
заголовка. Не переносить слова – включение флажка запрещает перенос
текста по строкам. Разделы Границы и Фон позволяют задать визуальные
параметры границ ячейки и фона.
FrontPage 2003 предоставляет новую возможность при работе
с таблицами – макетные
таблицы. Они используются при проектировании
web-страниц со сложной структурой оформления.
Макетная таблица – особый вид HTML-таблиц, у которых наверху
и внизу каждого столбца и по сторонам таблицы имеются ярлыки
с информацией о ширине и высоте в пикселях.
Макетная таблица (рис. 5) состоит из следующих компонентов.
Рисунок 5 – Проектирование макетной таблицы
Макетная таблица (1) – представляет основу для
разработки
макета. При выделении в режиме Конструктора она выделяется зеленой
рамкой.
57
Макетные ячейки (2) – представляют собой области макетной
таблицы, в которых размещается содержимое страницы, включая текст,
рисунки и другие элементы, и при выборе выделяются синей рамкой.
Ячейки-заполнители (например, 3) не содержат данных и существуют для того, чтобы дополнять сумму ширин столбцов таблицы до общей
ширины таблицы, и выделяются однотонным фоном (только
в режиме
Конструктор).
Обычно перед созданием макета страницы с помощью макетных
таблиц страницу подготавливают следующим образом (рис. 5).
1. Устанавливают нулевые поля web-страницы (команда Файл –
Свойства – диалоговое окно Свойства страницы – вкладка Дополни-
тельно).
2. Отображают линейку (4), с помощью которой можно измерять
в пикселях ширину и высоту макета (команда Вид – Линейка и сетка
–
Показать линейку).
3. Отображают сетку (5) (команда Вид – Линейка и сетка – Пока-
зать сетку).
4. При необходимости вставляют изображение-образец (6), пред-
ставляющий собой графическую модель web-страницы с большим процентом прозрачности, который вставляется как фон и может использоваться
как визуальный ориентир для разработки макета web-страницы (команда
Вид – Изображение-образец – Настроить).
В открывшемся диалоговом
окне Изображение-образец с помощью кнопки Обзор выбирается графический файл, определяется его смещение относительно верхнего левого
угла окна и прозрачность.
5. Вставка и редактирование макетных таблиц осуществляется
с помощью панели Макетные таблицы и ячейки области задач (рис. 5),
которую можно открыть командой Таблица – Макетные таблицы и
ячейки. Работая
с этой панелью, можно выполнять следующие действия.
1) Создать макетную таблицу.
Команда Вставить макетную таблицу (7) – вставляет на web-
страницу макетную таблицу фиксированного размера.
Команда Нарисовать макетную таблицу (8) – позволяет нарисовать
макетную таблицу нажатой левой кнопкой мыши.
58
Выбор в окне Макет таблицы (10) – вставляет на web-страницу
макетную таблицу выбранного типа.
Команда Вставить макетную ячейку (11) – открывает диалоговое
окно, в котором задаются параметры ячейки. В результате создается
таблица, содержащая макетную ячейку.
Макетная таблица имеет информационные ярлыки на сторонах (9),
щелчок левой кнопкой мыши на ярлыке открывает диалоговое окно
с командами, позволяющими
изменить ее параметры.
2) Изменить свойства макетной таблицы.
Поля Ширина, Высота (12) служат для изменения размеров.
Кнопки Выравнивание (13) определяют размещение макетной
таблицы на странице.
3) Создать макетные ячейки внутри выделенной макетной таблицы.
Команда Нарисовать макетную ячейку (14) позволяет нарисовать
ячейку в нужном месте. Выделенная ячейка имеет один ярлык (15) с указанием
ее размеров. Изменение размеров ячейки осуществляется нажатой
левой кнопкой мыши за метки выбора. При выделении макетной таблицы
с нарисованными ячейками появляются информационные ярлыки для каждой ячейки.
Раздел Колонтитулы ячейки – позволяет задать параметры верхнего и нижнего колонтитулов (высота, поля, фоновый цвет, ширина и цвет
границы).
Раздел Углы и заливка
ячейки – позволяет задать вид углов ячейки
(стандартный или рисунок, размеры, цвета фона и границ) и параметры
тени, отбрасываемой от нее (размер, размытие, направление).
Технология работы
Работа в программе Блокнот
1. Запустите Блокнот.
2. Введите:
<HTML>
<HEAD>
<TITLE> Создание таблицы</TITLE>
</HEAD>
<BODY>
59
<TABLE>
<CAPTION ALIGN="TOP">Список друзей и подруг</CAPTION>
<TR><TH>ФИО</TH><TH>Телефон</TH></TR>
<TR><TD>Иванов Иван</TD><TD>35-35-35</TD></TR>
<TR><TD>Петрова Юлия</TD><TD>46-46-46</TD></TR>
</TABLE>
</BODY>
</HTML>
3. Сохраните документ под именем table.htm в своей рабочей папке.
4. Просмотрите сохраненный документ в браузере Internet Explorer.
5. Добавьте следующий HTML-код в файл table.htm
<TABLE BORDER="1">
<TR>
<TD COLSPAN="3">Если в таблице два тега TR, то в ней две стро-
ки.</TD>
</TR>
<TR>
<TD>Если в строке три тега TD,</TD>
<TD>то в ней</TD>
<TD>три столбца.</TD>
</TR>
</TABLE>
6. Сохраните документ и просмотрите его в браузере.
Работа в Microsoft FrontPage 2003
1. Создайте сайт из трех страниц «История развития библиотек»,
используя схемы таблиц для разметки страниц, приведенные ниже. При
создании таблиц установите невидимые границы. Все страницы свяжите
между собой
гиперссылками.
Схема 1
60
Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]