11.Редактор FrontPage Express
Редактор FrontPage представляет собой простое средство для создания Web-страниц без непосредственного описания гипертекстовой разметки. Возможности языка HTML заложены в редактор FrontPage полностью.
Программа FrontPage выпущена компанией Microsoft и выполнена в едином стиле продуктов, входящих в пакет Microsoft Office.
В верхней части окна располагаются строка меню и две панели инструментов: стандартная и панель форматирования. Дополнительная панель инструментов в программе FrontPage содержит поля формы. Линейка в этой программе не используется, так как точное позиционирование элементов страницы средствами языка HTML невозможно.
Основную часть окна занимает рабочая область. Выбрать режим представления рабочей области можно в левом нижнем углу окна – режим конструктора, НТМL-кода, режим с разделением (одновременно показывается конструктор и код), режим просмотра.
FrontPage позволяет использовать широкий набор веб-компонентов Microsoft Office. Веб-компоненты – это интерактивные листы, диаграммы и сводные списки, делающие возможным анализ данных на Web-страницах, а так же динамические эффекты, счетчики посещений, панели ссылок и т.д.
Веб-компоненты представляют собой элементы Microsoft ActiveX, отображающие данные из книги, базы данных или другого заданного источника данных. При изменении данных в источнике, изменения отображаются в компоненте. Это позволяет посетителям Web-страницы просматривать обновленные данные и работать с ними.
Добавляется веб-компонент при помощи меню "Вставка" – рис.1.
Диаграмма Office - этот компонент может представлять собой график, гистограмму, круговую диаграмму или другой тип заданной диаграммы. Он может отображать данные, введенные в таблицу, данные, содержащиеся в таблицах и запросах базы данных, или данные из содержащихся на этой же Web-странице компонентов «Сводная таблица Office» или «Электронная таблица Office». Компонент «Диаграмма Office» можно использовать для облегчения посетителям Web-страницы задач сопоставления данных и выявления зависимостей.
Рис.1. – Выбор мастера веб-компонента
Прежде чем строить диаграмму необходимо подготовить данные, которые она будет иллюстрировать, например, создать интерактивную электронную таблицу.
Электронная таблица Office - этот компонент отображающий строки и столбцы ячеек, содержащих связанные сведения. Он может отображать данные из книги Excel, текста или файлов других типов, из всех типов баз данных, включая реляционные базы данных, например базы данных Microsoft SQL Server, а также из служб поставщиков данных. Посетители Web-страницы могут вводить данные непосредственно в ячейки, сортировать их и применять к ним фильтры, изменять форматирование данных. Посетители Web-страницы могут также выполнять расчеты, используя формулы и функции.
Если предусматривается, что посетители страницы не должны пользоваться функциями и возможностями форматирования, а могут только менять значения ячеек, то в свойствах компонента на закладке "Книга" нужно убрать метки в отображении полос прокрутки, панели инструментов и ярлыков листов (рис.2.), а на закладке "Лист" – метки заголовков строк и столбцов.
После оформления таблицы, вставляется компонент "диаграмма". После выбора компонента запускается мастер. Последовательность шагов для построения диаграммы следующая:
Выбрать источник данных – рис.3.;
Указать диапазон данных (ввод с клавиатуры);
Выбрать тип диаграммы;
После закрытия мастера, выбрать в меню правой кнопки мыши "Свойства элемента" и добавить заголовок диаграммы и легенду – рис.4.
Рис.2 – Свойства веб-компонента "Электронная таблица"
Рис.3 – Выбор источника данных для диаграммы
Рис.4 – Добавление заголовка диаграммы
Задание 6.
Используя приложение MS FrontPage, создать страницу, в которой отображается заглавие таблицы в виде бегущей строки, сама таблица (таблица 1 из задания 4.) , круговая диаграмма структуры затрат за отчетный год и столбиковая диаграмма отклонений. Диаграммы должны быть оформлены в соответствии со стандартом (т.е. обязательно наличие заголовка, подписи осей, легенды). Таблицу создать таким образом, чтобы ее значения можно было изменить в режиме отображения страницы обозревателем.
Вопросы и задания для контрольной работы:
Контрольная работа состоит из теоретического вопроса и практического задания по вариантам (вариант соответствует последней цифре номера зачетной книжки студента).
Вариант 1.
История развития сетевых технологий.
Создать " " HTML-страницы на тему ……………………………и объединить их при помощи ссылок и фреймовой структуры.
Вариант 2.
1.
Приложение 1.
Таблица 1 – Основные теги и атрибуты
Имя тега |
Атрибуты |
Значение тега |
Значение атрибута |
||
Структурные теги |
|
||||
<html></html> |
- |
Заключает HTML код |
|
||
<head></head> |
- |
Заголовок документа |
|
||
<Meta> |
name="Generator" content=" … " |
Служебная информация о странице |
Имя программы, сгенерировавшей документ |
||
|
name="Description" content=" … " |
|
Краткое описание содержания страницы |
||
|
name="Keywords" content=" …, …, … " |
|
Ключевые слова документа, разделенные запятыми |
||
<title></title> |
|
Название страницы |
|
||
<body></body> |
text="цвет" |
Содержательная часть страницы |
Цвет текста |
||
|
bgcolor="цвет" |
|
Цвет фона страницы |
||
|
topmargin="число" |
|
Расстояние до верха окна |
||
|
leftmargin="число" |
|
Расстояние до левого края окна |
||
|
link=" цвет" |
|
Цвет ссылки |
||
Форматирование текста |
|||||
<p></p> |
align=left/center/righ |
расположение части текста |
Расположение слева, в центре страницы или справа |
||
<div></div> |
- |
Блок содержания |
|
||
<span></span> |
- |
Встроенное содержание |
|
||
<br> |
- |
Переход в начало следующей строки |
|
||
<hr/> |
size=5 |
Горизонтальная линия |
Толщина линии 5 пикс. |
||
<font></font> |
color="цвет" |
Выделение фрагмента текста |
Цвет текста |
||
|
face="название шрифта" |
|
Шрифт текста |
||
|
size="размер текста" |
|
Размер шрифта текста |
||
|
align="justify" |
|
Выравнивание по краям страницы |
||
<center> </center> |
- |
|
Расположение по центру |
||
<b></b> |
- |
|
Полужирный шрифт |
||
<u> </u> |
- |
|
Подчеркнутый шрифт |
||
<i></i> |
- |
|
Курсив |
||
Продолжение таблицы
Имя тега |
Атрибуты |
Значение тега |
Значение атрибута |
<a></a> |
href="имя файла" |
Гиперссылка |
Преобразование текста в гиперссылку |
|
name="..." |
|
куда открывается ссылка |
|
target |
|
Открытие ссылки в новом окне |
<h1>…<h6> </h1>…</h6> |
- |
Выделение заголовка (1-6 –уровень заголовка) |
|
Изображения и стили |
|||
<img/> |
|
Рисунок |
|
<map></map> |
|
Карта - изображение |
|
<style><style> |
|
Таблица стилей |
|
<link/> |
|
Ссылка на внешний файл |
|
Теги списков |
|||
<ol>….</ol> |
|
упорядоченный (нумерованный) список |
|
<ul>…</ul> |
|
ненумерованный список. |
|
<li>..</li> |
type=”disk” / “square” / “circle”/"1"/"а" |
Элемент списка |
вид маркера в зависимости от типа списка |
<dl> </dl> |
|
список определений |
|
<dt> |
|
элемент термина |
|
<dd> |
|
элемент описания |
|
Продолжение таблицы
Имя тега |
Атрибуты |
Значение тега |
Значение атрибута |
Теги и атрибуты таблицы |
|||
<table></table> |
|
описание таблицы |
|
<th></th> |
|
заголовок таблицы |
|
<tr></tr> |
|
строка (ряд) таблицы |
|
<td></td> |
|
столбец (ячейка) таблицы |
|
|
width="50" или width="50%" |
|
ширина таблицы (ячейки) |
|
height="45" или height="45%" |
|
высота таблицы (строки) |
|
align="center" (right, left) |
|
горизонтальное выравнивание в ячейке |
|
valign="middle" (top, bottom) |
|
вертикальное выравнивание в ячейке |
|
colspan="n" |
|
горизонтальное объединение ячеек в n столбцах |
|
rowspan="n" |
|
вертикальное объединение ячеек в n строках |
|
border="3" |
|
толщина рамки |
|
bordercolor="#000000" |
|
цвет рамки |
|
cellpadding="5" |
|
расстояние между рамками ячейки и ее содержимым |
Продолжение таблицы
Имя тега |
Атрибуты |
Значение тега |
Значение атрибута |
Фреймы |
|||
<frameset></frameset> |
name="window-1" |
Описание фрейма |
Имя фрейма |
|
marginheight="0" |
|
ширина горизонтального фрейма |
|
marginwidth="0" |
|
ширина вертикального фрейма |
|
scrolling="yes" (no, auto) |
|
наличие полосы прокрутки |
|
rows="100,200,*" |
|
количество и размеры горизонтальных фреймов (рядов). Размеры в процентах или пикселях. |
|
cols="10%,20%,70%" |
|
количество и размеры вертикальных фреймов (рядов). Размеры в процентах или пикселях. |