Материал: Создание простейших web-документов. методические указания к выполнению лабораторной работы. Кострюков С.А., Пешков В.В

Если же заданы оба атрибута, то создается сетка фреймов. Значение каждого из этих атрибутов – это перечисление через запятую размеров отдельных фреймов, например:

<FRAMESET COLS="60%,40%">

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

<FRAMESET ROWS="40%,40%,*">

Между открывающим и закрывающим тегами <FRAMESET> и </FRAMESET> должно находиться ровно столько элементов, сколько областей было создано атрибутами COLS= и ROWS=. Можно при этом использовать дополнительные элементы FRAMESET (для описания дальнейшего разбиения на подобласти еще меньшего размера) или же непарные теги <FRAME>, которые задают способ использования области.

Тег <FRAME> обязательно должен включать атрибут SRC=, который указывает, какой именно документ загружается в соответствующую область при открытии страницы. Его значение – адрес URL нужного документа (абсолютный или относительный).

Атрибут NAME= позволяет задать имя для созданной области, например:

<FRAME SRC="text.htm" NAME="left''>

Это имя может использоваться для загрузки новых документов в данную область. Для этого в тег <А>, задающий гиперссылку, нужно добавить атрибут TARGET=, значение которого – ранее заданное имя области. При переходе по данной ссылке новый документ загрузится именно в указанный фрейм.

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

16

Работа в редакторе Microsoft Office SharePoint Designer 2007

Программа SharePoint Designer 2007 входящая в состав пакета Microsoft Office 2007, рассчитана, в первую очередь, не на создание отдельных web-страниц, а на сопровождение полноценного web-узла. Она содержит средства контроля структуры узла, единства оформления, правильности внутренних и внешних гиперссылок. Средства создания страниц, рассматриваемые в данной работе, – это всего лишь небольшая и не основная часть возможностей этой программы.

Окно программы SharePoint Designer представляет собой сочетание окна редактора и окна браузера (рис. 2). При отображении редактором текста документа HTML отображаются даже обычно невидимые элементы (такие, как якоря). При этом текст можно редактировать такими же средствами, что и в обычном текстовом процессоре. Программа имеет три режима отображения документа – Конструктор, С разделением и Код.

Рис. 2. Отображение web-документа в режиме С разделением

Основным средством форматирования является панель инструментов Общие, при этом почти все еѐ инструменты присутствуют также на панели Форматирование. Эти панели включают раскрывающиеся списки Стиль, Шрифт и Размер, назначение которых то же, что и в программе Word, кнопки выбора начертания символов и выравнивания текста, кнопки создания

17

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

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

Формат Шрифт, Формат Список, и т.п.

Чтобы создать гиперссылку, нужно сначала выделить фрагмент текста, который будет использоваться как ссылка, и кликнуть на кнопке Вставить гиперссылку, либо использовать команду меню Вставка Гиперссылка. В открывшемся диалоговом окне Вставка гиперссылки на панели Связать с

можно выбрать тип гиперссылки. Это может быть ссылка на другой файл (кнопка «файлом, веб-страницей»), на другое место в этом же документе (кнопка «местом в документе»), новую страницу своего сайта (кнопка «новым документом», при этом документ, на который будет указывать ссылка, создается немедленно), или адрес e-mail (кнопка «электронной почтой»).

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

Готовая гиперссылка будет отображаться в окне программы SharePoint Designer точно так же, как и в браузере – синим цветом и с подчеркиванием. Для проверки работоспособности гиперссылки нужно кликнуть на ней правой кнопкой мыши и выбрать в контекстном меню команду По ссылке.

Для создания таблицы служит кнопка Вставить таб-

лицу, а также команда меню Таблица Вставить таблицу.

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

18

ние, поля, границы и т.д. Это же диалоговое окно выводится командой Таблица Вставить таблицу.

Чтобы ввести данные в таблицу, нужно установить курсор в выбранную ячейку и начать ввод.

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

Для вставки формы и ее элементов также служит Панель элементов. В списке Элементы управления формы следует вы-

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

В HTML свойства каждого элемента определяются атрибутами тега. Редактор SharePoint Designer позволяет задавать их с помощью специальных диалоговых окон. Чтобы открыть такое окно, нужно кликнуть на нужном элементе правой кнопкой мыши. В нижней части контекстного меню находятся команды, относящиеся к элементам документа, рассматриваемым редактором как открытые. Порядок следования команд соответствует порядку вложения элементов. Выбрав одну из этих команд, Вы откроете диалоговое окно свойств соответствующего элемента. Элементы управления в этом окне соответствуют атрибутам открывающего тега для выбранного элемента.

Для вставки рисунка служит кнопка Вставить рисунок из файла, а также команда меню Вставка Рисунок Из фай-

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

Чтобы вмешаться в процесс автоматического формирования web-страницы и внести изменения непосредственно в генерируемый код HTML, нужно перевести программу в режим Код или С разделением. При этом будет отображаться сгенерированный программой SharePoint Designer код HTML. Выделение цветом позволяет легко находить ключевые слова тегов и их атрибуты. Этот код можно редактировать вручную, однако при этом ответственность за правильность кода переносится с программы SharePoint Designer на создателя страницы.

19

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

Публикация web-документов

Для опубликования сайта необходимо разместить документы HTML и все дополнительные файлы (рисунки, мультимедиа и др.) на web-сервере. Если не рассматривать организационные вопросы, такие, как получение дискового пространства на сервере, оплата и др., то остаются две основные проблемы.

–Как подготовить текст web-страниц сайта, чтобы при переносе на сервер не произошло нарушения структуры сайта?

–Как выполнить копирование Ваших файлов на cepвep? Первая задача решается организационными мерами в ходе

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

Для переноса документов на сервер обычно используется прямое копирование данных через Интернет. Этот способ более надежен, чем передача данных на флеш-накопителе или другом носителе. Чтобы использовать его, нужно знать адреса, используемые для отправки файлов (как правило, для публикации web-документов применяется протокол FTP).

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

20