FrontPage 2003

Воспроизведение звука – воспроизводиться музыкальный файл.

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

Вызов сценария – выполняется сценарий написанный вручную.

Замена изображения – изображение меняется на другой графический файл.

Восстановление замененных изображений – восстанавливается изображение, которое загружалось при загрузке web-страницы.

Изменение свойств – изменяются свойства объекта (шрифт, границы, положение,

видимость).

Восстановление измененных свойств – восстанавливаются свойства объекта, которые были при загрузке web-страницы.

Открытие окна обозревателя – открывается новое окно браузера с заданными параметрами.

Переход по URL – в окно браузера загружается другой документ.

При выборе любого действия открывается диалоговое окно, в котором задаются его параметры.

Действия прикрепленные к выделенному объекту отображаются ниже кнопки Вставить в виде таблицы (2). Выделенное действие можно удалить с помощью кнопки

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

События, связанные с мышью и порядок их выполнения (могут использоваться с боль шинством элементов):

onmouseover - событие происходит при перемещении указателя мыши на элемент. onmousemove - событие происходит при перемещении указателя мыши, когда он находится на элементе.

62

onmousedown – событие происходит когда кнопка мыши нажата. onmouseup – событие происходит когда кнопка мыши отпущена.

onclick - событие происходит при однократном щелчке кнопки указателя мыши на элементе. ondblclick - событие происходит при двойном щелчке кнопки указателя мыши на элементе.

onmouseout - событие происходит при перемещении указателя мыши за пределы элемента.

События, связанные с клавиатурой (могут использоваться с большинством элементов):

onkeydown - событие происходит при нажатии клавиши на элементе. onkeyup - событие происходит при отпускании клавиши на элементе.

onkeypress - событие происходит при нажатии и отпускании клавиши на элементе. onhelp – событие происходит при нажатии клавиши F1.

События, связанные с выбором элементов и редактированием форм:

onfocus - событие происходит при получении элементом фокуса с помощью указателя мыши или последовательности перехода. Может использоваться со следующими элементами: LABEL, INPUT, SELECT, TEXTAREA и BUTTON.

onblur - событие происходит при переходе фокуса с элемента с помощью указателя мыши или последовательности перехода. Может использоваться с теми же элементами, что и onfocus.

onchange - событие происходит при потере указателем мыши фокуса ввода, если его значение было изменено с момента получения фокуса. Используется со следующими элементами: INPUT, SELECT и TEXTAREA.

onselect - событие происходит при выделении пользователем некоторого текста в текстовом поле. Может использоваться с элементами INPUT и TEXTAREA.

onsubmit - событие происходит при отправке формы. Используется только в элементе

FORM.

onreset - событие происходит при сбросе формы. Используется только в элементе

FORM.

События, связанные с web-страницей (могут использоваться в элементах BODY и

FRAMESET):

onload - событие происходит, когда браузер заканчивает загружать окно или все фреймы элемента

onunload - событие происходит, когда браузер удаляет документ из окна или фрейма.

63

5.8.3. Оформление с использованием темы.

Для оформления страниц web-сайта могут быть использованы темы. Тема – это

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

Для того чтобы применить тему к web-страницам сайта необходимо выполнить следующие действия.

Выполнить команду Формат→Тема. Появится панель

Тема (рис.5.65) в области задач.

1

Навести указатель мыши на нужную тему в списке тем Выбрать тему (появится меню-стрелка - 1).

Щелкнуть на выбранную тему левой кнопкой мыши, в

результате чего тема будет применена к текущей web-странице или к выделенным на панели Список папок.

Щелкнуть на меню стрелку и выбрать одну из предложенных команд: Применить как тему по

web-сайта (не изменяются только те web-страницы, к Рисунок 5.65 – Панель Тема которым уже была применена какая-либо тема); Применить к выделенным страницам (3) – аналогична щелчку мыши по теме; Настройка… (4)- открывается диалоговое окно Настройка темы для редактирования темы; Удалить (5) – удаление созданных и модифицированных тем.

В результате применения темы, становятся недоступны команды диалогового окна

Свойства страницы вкладка Форматирование.

Для оформления web-сайта можно создавать собственные темы, которые настраиваются в окне Настройка темы. Данное окно может быть открыто командой

Настройка… (3) из выпадающего меню темы, в этом случае новая тема получается путем модификации существую щей и сохранением командой Сохранить как…. Команда Создать новую тему… (5) открывает такое же окно, в котором тема настраивается на основе базового шаблона и сохраняется командой Сохранить.

Окно Настройка темы (рис.5.66) включает в себя опции для изменения цвета,

графики и текста.

Опция Цвета… (1) позволяет выбрать цветовую схему, т.е. цвета всех текстовых элементов и фона web-страницы. Выбор может быть осуществлен тремя способами.

64

Вкладка Цветовые схемы – позволяет выбрать одну из стандартных цветовых схем.

Вкладка Цветовой круг – позволяет подобрать сочетание цветов, перемещая точку на цветовом круге и меняя положение бегунка Яркость:.

Вкладка Другой – позволяет для каждого элемента выбрать свой цвет.

Рисунок 5.66 – Диалоговое окно Настройка темы

Во всех случаях присутствует выбор насыщенности палитры (Обычные цвета, Яркие цвета), а в окне Просмотр… - можно увидеть результаты внесенных изменений.

Опция Графика… (2) позволяет определить (кнопка Обзор) для каждого графического элемента дизайна графические файлы (вкладка Рисунки) и при необходимости шрифт надписи (вкладка Шрифт). Переключатель Активные рисунки

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

Опция Текст… (3) позволяет выбрать для каждого текстового элемента шрифт из списка, и, используя кнопку Другие стили текста: создать стили, которые будут доступны при форматировании web-страниц с данной темой.

Сохраненная тема появляется в списке тем и может быть использована в дальнейшем при оформлении web-страниц сайта.

5.8.4. Динамические web-шаблоны.

При помощи динамических web-шаблонов можно создавать web-страницы,

имеющие общий макет. Помимо этого, можно сделать некоторые области шаблона доступными для редактирования, а другие недоступными. Количество создаваемых динамических web-шаблонов (формат файла .dwt) для web-сайта неограниченно, а

каждый из них можно связать с любым числом страниц.

65

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

Динамический web-шаблон можно создать следующим образом.

Создать web-страницу (Файл→Создать→Пустая страница) и сохранить ее командой

Файл→Сохранить. Или открыть имеющуюся web-страницу и выполнить команду

Файл→Сохранить как….

В открывшемся диалоговом окне Сохранить как необходимо выбрать или создать папку для сохранения, задать имя используя только латинские буква, цифры и разрешенные символы, в выпадающем списке Тип файла: выбрать Динамический веб-шаблон (*.dwt) и нажать кнопку Сохранить.

Отредактировать содержимое об щего макета.

Определить изменяемые области. Для этого выделить область, которую можно будет изменять при редактировании web-страниц и выполнить команду

Формат→Динамический веб-шаблон→Управление изменяемыми областями…. В открывшемся диалоговом окне Изменяемые области (рис.5.67)

задать имя данной области (1) и кнопкой Добавить

(2) внести ее в список изменяемых областей. Закрыть данное окно. Изменяемая область будет обведена в которой прикреплен ярлык (3) с ее именем.

Когда все необходимые области будут добавлены в список изменяемых областей, необходимо сохранить динамический web-шаблон (Файл→Сохранить). Для

66

шаблон и нажать кнопку Открыть.

Если в теле выбранной web-страницы присутствует содержимое, то появится диалоговое окно Выбор изменяемых областей для содержимого (рис.5.68).

Чтобы переместить все содержимое тела web-страницы в определенную изменяемую область, нужно выбрать текст (Основной текст - 1), а затем нажать кнопку Изменить

(2). В списке Новая область выбрать изменяемую область, в которую требуется переместить содержимое, если выбрать вариант (нет), содержимое будет удалено.

Чтобы сохранить содержимое и структуру web-страницы, нужно нажать кнопку

Пропустить текущую страницу (3).

На web-страницах с присоединенным динамическим web-шаблоном редактировать

рис.5.69). Установить курсор в какое-

Открыть страницу динамического web-шаблона.

Отредактировать общие неизменяемые области.

Изменить изменяемые области с помощью диалогового окна Изменяемые области

(команда Формат→Динамический веб-шаблон→Управление изменяемыми областями…). Выбрать область из списка областей двойным щелчком левой кнопки мыши. Используя кнопку Удалить можно удалить изменяемую область (содержимое не удаляется). Изменив имя области в поле Имя области: и нажав кнопку Переименовать

можно изменить название области.

Сохранить измененный динамический web-шаблон (команда Файл→Сохранить). При наличии web-страниц, присоединенных к динамическому web-шаблону, появляется окно, в котором предлагает обновить эти файлы.

Для того чтобы отсоединить динамический web-шаблон от одной или нескольких web-страницы нужно выполнить следующие действия.

Открыть web-страницу или выделить необходимые web-страницы на панели Список папок.

Выполнить команду Формат→Динамический веб-шаблон→Отсоединить от динамического web-шаблона. При этом удаляется только форматирование,

осуществляемое в этом шаблоне; автоматическое удаление содержимого эт их страниц не производится.

67

Источники

Литература.

1.Microsoft Office 2003: пер. с англ./ Лаури Энн Ульрих; пер. с англ. Ю.А.Мишукова. -

М.:АСТ: Астрель, 2005. - XX, 442, [2] c.: ил. - (Все о работе с ...)

2.Microsoft Office 2003. Полное руководство. Серия "Справочник профессионала" / Дж.А.Кеттелл, Г.Харт-Дэвис, К.Симмонс; Пер. с англ. - М.: Издательство "ЭКОМ",

2006. - 832 с.: ил.

3.Создание Web-сайтов. Учебное пособие. Авторы составители: Кузьмина Н.В,

Инькова Н.А., Зайцева Е.А., Толстых С.Г. Тамбов: Издате льство ТГТУ, 2002. 88 с.

Internet сайты.

1.Сайтостроительство - http://alice.pnzgu.ru/~dvn/uproc/books/site_tarasov/index.html .

2.Сайт Валентины Захаркиной (учебные материалы) - http://vvz.nw.ru/ .

3.Каскадные таблицы стилей - http://webclass.polyn.kiae.su/classes/css12/first.htm .

4.Для тех, кто делает сайты - http://htmlbook.ru/ .

5.Курсы по FrontPage - http://office.microsoft.com/ru-ru/training/CR061832701049.aspx .

6.MS Front Page 2000 - http://study.krr.ru/

7.Учебник по работе с Front Page 2003 - http://www.dmitrij.ru/uchebka/BOOK/CONT.htm.

8.Современные средства создания Web-страниц - http://www.csa.ru/old/webmaster/web-mod.htmr .

9.Web-технологии в школе - http://design.gossoudarev.com/ .

68

Приложение 1.

Основные тэги языка HTML

Формально, первым в html-документе должен указываться элемент doctype,

сообщающий браузеру об использованной версии HTML. В элементе doctype указывается также адрес, с которого браузер может загрузить определение типа документа - Dtd (Document Type Definition). Эта строка помогает браузеру определить, как правильно

интерпретировать данный документ: <!doctype HTML public"-//W3C//Dtd HTML 4.0 Frameset // EN" "http://www.w3.org/tr/REC-html40/frameset.dtd">. На практике же этот элемент зачастую опускают без ущерба для отображения документа.

Далее обозначается начало и конец. Это делается с помощью тэга-контейнера <HTML> … </HTML>. Между этими тэгами размещается заголовок и тело документа.

Далее приведены некоторые тэги, которые используются внутри контейнера заголовка (при создании html-документа этот контейнер может быть пропущен).

<head>

<title>Заголовок html-документа</title> - будет отображаться в строке заголовка окна браузера.

Для определения свойств документа предназначен тег <meta>…</meta>. Используя тег meta можно задать документу любое свойство (атрибут name или http-equiv), указать используемый язык (атрибут lang) и указать значение данного свойства (атрибут content).

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"></meta>-

пример указания на windows-кодировку исходного документа

<meta http-equiv="refresh" content="5; url=http://… "></meta>- пример загрузки нового документа с адресом http://…через 5 секунд после загрузки данного

<meta name="Discription" lang="ru" content="Описание, до 100 символов"></meta>

69

<meta name="Keywords" content="Ключевые слова через ‘,’, до 1000 символов"></meta> <meta name="Autor" lang="ru" content="Ф.И.О."></meta>

<style type='text/css'> описываются стили на языке CSS, используемые в документе

</style>

<link rel="stylesheet" href="style.css" type="text/css"></link> - пример указания на связанный документ, который является таблицей стилей написанных на языке CSS.

<script Language=" " type="text/javascript"> код на языке JavaScript</script> </head>

Контейнер тела документа (<body> … </body>) формируется исходя из того,

что именно должно отображается на web-странице: текст, картинки, таблицы. Начальный тег может иметь несколько атрибутов (ни один из них не является обязательным).

<body

background="URL/file-name" - задает графическое изображение (в формате gif, jpg или png), которое будет фоном создаваемой страницы.

bgproperties=fixed - фон не прокручивается вместе с текстом, а стоит на месте. bgcolor=”#kod”или bgcolor=”name” - задает цвет фона документа *.

text=”#kod”или text=”name” - задает используемый по умолчанию цвет текста. link=”#kod”или link=”name” - задает цвет непосещенной гиперссылки.

alink=”#kod”или alink=”name” - задает цвет гиперссылки в момент щелчка по ней мышью. vlink=”#kod”или vlink=”name” - задает цвет посещенной гиперссылки.

topmargin=”число” - задает отступ в пикселях от верхнего края окна браузера. По умолчанию 10 пикселей.

marginheight=”число” - тоже самое, но для браузера Netscape. leftmargin=”число” - задает отступ в пикселях от левого края окна браузера.

По умолчанию 10 пикселей.

marginwidth=”число” - тоже самое, но для браузера Netscape. bottommargin=”число” - задает отступ в пикселях от нижнего края окна браузера. rightmargin=”число” - задает отступ в пикселях от правого края окна браузера.

scroll -устанавливает наличие или отсутствие полосы прокрутк и (только для браузера

Internet Explorer).

>

* В HTML цвета определяются цифрами в шестнадцатеричном коде или словами их заменяющими. Цветовая система базируется на трех основных цветах: красном, зеленом и синем (система RGB). Для каждого цвета задается шестнадцатеричное значение в пределах от 00 до FF, затем все три числа объединяются в одно, перед которыми

70

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

Например: Blue="#0000FF" определяет синий цвет.

Основные тэги структурного форматирования.

<br> - разрывает текстовый поток и вставляет новую строку. Закрывающего тега нет.

<nobr>…</nobr> - размещение элементов html-документа без переноса на другую строку.

<h1>…</h1>, <h2>…</h2>, <h3>…</h3>, <h4>…</h4>, <h5>…</h5>, <h6>…</h6> -

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

Заголовкам можно задавать атрибуты.

<hn align=[left][right][center][justify]> …</hn> - выравнивание соответственно по левому краю, правому краю, центру или по всей ширине окна браузера.

<p align=[left][right][center][justify]> …</p> - задает абзацы, которые отделяются друг от друга двойным межстрочным интервалом.

<div align=[left][right][center][justify]> …</div> - задает раздел, который может содержать

другие разделы, любое количество абзацев, списки, таблицы и другие HTML-элементы. Браузеры выводят содержимое раздела с новой строки,

отделяя от остального текста одинарным межстрочным интервалом. <span>…</span> - задает блок текста с определенными характеристиками.

<blockquote> … </blockquote> - блок цитирования, который выводится браузерами

отдельным абзацем с заметным сдвигом справа и слева. <pre>…</pre> - позволяет сохранить исходное форматирование, текст отображается так,

</ol> - завершает нумерованный список

<ul type=[disc][circle][square]> - маркированный список, с различными вариантами маркеров.

<li> …</li> - элемент списка.

<li

type=… - определяет тип маркера или номера. value=…- задается порядковый номер элемента списка.

> …</li>

</ul> - завершает маркированный список